Plantilla discusión:Sobrepuesto
sobreponer con CSS[editar]
He borrado este texto en Ayuda:Imágenes porque no se aconseja el uso directo de CSS en Wikipedia por su complejidad. Pero es un tema interesante.
Cuando se quieren superponer dos o más imágenes (formando una imagen compuesta), se deben utilizar las instrucciones del tipo siguiente:
(Véase también: Imágenes compuestas)
{|class="floatright"
||<div style="position: relative">[[Archivo:IMAGEN_FONDO|150px]]
<div style="position: absolute; left: 49px; top: 67px">[[Archivo:IMAGEN_SUPERIOR|50px]]</div>
</div>
|}
- Nota: La posición de la imagen del fondo debe declararse como "relative", y la de los distintos elementos superpuestos como "absolute".
- Nota: La posición de los elementos superpuestos se controla con los parámetros left y top expresados en píxeles. Tienen su origen de coordenadas en la esquina superior izquierda de la imagen de fondo.
- Nota: Para que funcione correctamente, el código debe alojarse en una celda de una tabla.
Por ejemplo:
Superponer sobre la imagen de un cráter lunar un triángulo rojo y un texto en color blanco.
<!-- Código: -->
{|class="floatright"
||<div style="position: relative">[[Archivo:Engel'gardt crater AS11-42-6275.jpg|miniatura|derecha|280px|Vista oblicua de Engel'gardt desde el <span>[[Apolo 11]],</span> cerca del [[terminador lunar]]]]
<div style="position: absolute; left: 195px; top: 85px">[[Archivo:Red triangle.svg|15px]]</div>
<div style="position: absolute; left: 150px; top: 70px"><span style="color:white">'''Cima Máxima'''</span></div>
</div>
|}
|
