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>
|}
|
--Juan Villalobos (discusión) 20:17 6 oct 2018 (UTC)
Instrucciones de la plantilla
[editar]Me parece que en la explicación de la plantilla hay un error. Se indica:
| x = <posición> (Posición de la "imagen secundaria", respecto al borde superior de la "imagen base". NOTA: sin el sufijo "px") | y = <posición> (Posición de la "imagen secundaria", respecto al borde izquierdo de la "imagen base". NOTA: sin el sufijo "px")
Pienso que es al revés: x, respecto al borde inquierdo; e y, respecto al borde superior.
La he utilizao así, y funciona. JLVwiki (discusión) 12:58 29 nov 2024 (UTC)