JMiur [E]

Hay algunos detalles que parecen generar dudas cuando hablamos de superoponer contenidos. Todo el truco (si es que podemos llamarlo truco) es el uso de la propiedad position que es una de las más poderosas que tiene el CSS.

Los valores que son aceptados son varios (y ahora muchos más que antes desde que IE8 comenzó a interpretar algunos de ellos) pero, nos basamos sólo en dos de ellos: relative y absolute.

Veamos un ejemplo normal de un DIV oscuro y otro DIV claro, puestos uno debajo el otro y con alguna propiedad elemental:
<style>
.recOSCURO { background-color: #666; height: 150px; width:350px; }
.recCLARO { background-color: #CCC; height: 50px; width: 250px; }
</style>
<div class="recOSCURO">
<div class="recCLARO"> ....... </div>
</div>
Si no tienen contenido (no textos ni imágenes veríamos esto:


Si a ambos, les agregamos la propiedad position:relative; nada cambiaría, se vería lo mismo.

Como uno está dentro del otro, se dice que el externo (el que tiene el atributo class="recOSCURO") es el contenedor o elemento padre y el que está en el interior, (el que tiene el atributo class="recCLARO") es el contenido o elemento hijo.

Vamos a ponerle al primero la propiedad position:relative; y al segundo la propiedad position:absolute;


Tampoco vemos cambios evidentes pero, han cambiado de manera fundamental. El elemento oscuro (el contenedor) ahora nos sirve de referencia para posicionar el contenido y este, al tener definida su posicion como absoluta, puede ser ubicado de manera precisa dentro del otro. Si no vemos nada distinto es porque aún no le hemos indicado nada.

Para ubicarlo, usamos las propiedades left top right y bottom; todas o algunas de ellas. Estas, indican la distancia en que comenzará a mostrarse ese rectángulo y, al no poner nada aún, se asume que está en top:0px; left:0px; que es la posición por defecto de cualquier elemento; es decir, está en la parte superior izquierda del contenedor.

Vamos a moverlo. usamos el mismo código HTML pero, modificando las propiedades CSS:
.recOSCURO { background-color: #666; height: 150px; width:350px; position:relative; }
.recCLARO {
background-color: #CCC; height: 50px; width: 250px;
position: absolute;
right: 0px; bottom: 0px;
}

Hemos colocado el elemento en el extremo opuesto, en el ángulo inferior derecho.

Ahora, lo pondremos en el centro (hay que hacer algunas operaciones de suma y resta):
.recCLARO {
.......
left: 50px; top: 50px;
}

Como esas cuatro propiedades aceptan valores negativos, podemos sacar nuestro rectángulo del contenedor:
.recCLARO {
.......
right: -100px; top: 50px;
}

En todos los casos, el DIV contenedor es quien manda. Si, por ejemplo, lo centramos, el elemento interno se ubica igual, tomando como referencia, la posición del contenedor, sea cual sea esta:


¿Que pasa si el contenedor tiene un borde? pués entonces, ese borde no se tiene en cuenta (está por afuera) ¿Que pasa si el contenedor tiene un padding? entonces, esa separación es parte de su tamaño así que la posición top:0px siempre es la superior (sin el borde).

.recOSCURO {
.......
border: 5px solid #FFF;
margin: 0 auto;
padding: 10px;
}
.recCLARO {
.......
border: 5px solid #AAA;
right: -50px; top: 0px;
}

En resumen.

Para posicionar algo de manera exacta, el contenedor debe ser un bloque que tenga la propiedad position: relative; y el contenido, la propiedad position: absolute;.

Esto, último puede aplicarse a algunos de los elementos contenido o a todos ellos; de esta forma, podemos tener un control completo de cada etiqueta que agreguemos, sean esta imágenes, textos o cualquier otra cosa.

A
B
C

18 comentarios:

Garabato  

No es justo, si hay algo que me roba el sueño son estas cajas de colores llenas de cajitas con más colores. Cajas mágicas que no me permiten ver las letras que explican ni los códigos que las forman, sólo me muestran la posibilidad infinita de tener más y más cajas para jugar…

Vine a buscar algo que ya olvidé y me voy con la ilusión de que algún día seré dueña de todas las cajas del mundo entero…

Ojalá pueda dormir esta noche… no es justo, J.MIUR, claro que no. Tendrías que tener un blog paralelo con las cajas listas para llevar. Entonces nosotros, los niños grandes que no queremos dejar de jugar, jugamos a que aprendemos a hacerlas y no paramos hasta que nos salen. ¡¡Y nos salen!!

Voy a llorar.

Responder
JMiur  

Nadie ha dicho que la vida sea justa :D Bueno, usted juegue y gararabatee nomás que lo está haciendo bien. Paciencia y no llore sobre las cajas de colores que se destiñen :D

Responder
Graciela  

Haría un árbol con las alegrías, los dolores...entonces fuera de la caja mayor pondría éstos últimos...digo para despejar ;)

Buena semana amigo, no te tomo a la chacota, solo tengo que interpretar y eso me cuesta :D

Responder
Oloman  

Sólo una cuestión para en lo posible evitar confusiones propias y ajenas. En los textos marcados en azul turquesa ¿no debería ir POSITION en lugar de DISPLAY?

Responder
GARABATO  

Oh, JMiur, no he podido dormir pensando en todas estas cajas, que te aclaro: ¡¡nunca destiñen!! es el príncipe azul el que lo hace…:D
Con respecto al post, probé las “formas de superponer un texto a una imagen” que citabas como ejemplo, y no sólo lo entendí, sino que me salió perfecto… entonces pensé ¿por qué no lo hice antes? Y ahí caí en la cuenta de que hubiese sido ideal para mi Gran Orquesta Ratón ¿te acordás? Pero no, cuando lo vi, obnubilada por destellos de arrogancia, pensé que era una pavada y que lo hacía igual con Paint (y eso que no conocía a Paint Net) Bueno, eso, que no me pude dormir de la vergüenza…
Estas son las cosas que aprendo aquí adentro y lo mejor es que lo hago jugando…

Traje algo, si me lo permitís, para Graciela… lo dejo aquí, porque aquí la conocí y ella es mágica como las cajas de colores.

Che Graciela, creo que tengo ese árbol: Pintando letras... ;)

Responder
Gildo Kaldorana  

Jode , imposible explicarlo mas claro.
Gracias y un saludo.

Responder
JMiur  

Graciela: Una pregunta ¿Cómo puede ponerse a leer estas cosas a las seis de la mañana? :D

Oloman: Otra pregunta ¿Cómo demonios pasó eso? Eso sí, no puede negar que soy sistemático :D Gracias por el vasio.

GARABATO: Perfecto, no dudaba que lo lograra :D En realidad, hay muchas formas de hacer una misma cosa, la idea es conocerlas y luego aplicar alguna o combinarlas ... igual que jugar :D

Garcias por el comentario, Gildo.

Responder
oloman  

Cierto J.Miur, admito que es Vd. muy sistemático ¡Tanto que llegué a pensar que display quizás también admitía los valores relative y absolute en las nuevas versiones CSS! :D

Responder
Graciela  

Sr. Jmiur solo es un ejercicio de hace muchos años, me encantan las mañanas, antes que salga el sol, el canto de los pájaros, tomar mates, leer las noticias, escuchar la radio...esa tranquilidad hace que tenga buen humor durante parte del día.
Hablando en serio es la hora que más lucidez tienen mis neuronas, imagina al mediodía jajaja

Cuando estoy de 'asaltos' hace mucho que no organizan uno!!! me descontrolo :O y duermo hasta las 9 de la mañana, hora en que usted aparentemente hace noni noni.

He realizado una estadística: parece que l@s bloggers son nocturn@s o sea lechuzas.

Mira quién aparece y me confunde con su nick, ya he ido en busca del árbol que necesitaba...gracias tesoro :D

Responder
JMiur  

Oloman: ¿Quién sabe? Tal vez, hemos descubierto algo nuevo :D

Graciela: Ahhh, a mi también me encanta el amanecer, es justo la hora qen que me voy a dormir :D Lechuzas ... vampiros .... sí, algo de eso hay. Noche y mate ¿Puede uno tener un blog sin esas dos cosas? :D

Responder
Graciela  

Sr. Jmiur el día me necesita activa, cómo podría acostarme a esa hora, usted tiene idea de lo que me dice :P desvergonzado...ahora cómo encontraría a alguien en el pajarito, imposible!!!: usos horarios, gentes noctámbulas y después me dicen no apareces, donde te metes!!!

En realidad caigo desmayada en la cama, tengo la suerte de no recordar el momento en que me acosté...yo le estoy revelando muchos secretos de mi 'vida íntima propia particular' diría una amiga.

El mate es imprescindible, usted no fuma, yo sí.

Bueno hoy he tenido un día de esos en que una se pregunta ¿porqué la gente no crece?, se ha cuestionado eso alguna vez?

Salúdole muy atte.-

Responder
JMiur  

Graciela:
Se ve que algunos nacemos lechuzas, debe ser metabólico o genético :D

Lo de la gente que no crece no sabría contestarle ¿es así? Sí, tiene razón, es así :D

Responder
blasblog  

en estos dìas he tratado de agregar un quadro -widget de blogger- para los ùltimos comentarios, lastimosamente el fondo es oscuro y las letras obscuras que me propone el programa no concienten una visiòn...
ese tipo de problemas tienen algo que ver con este post de POSITION?
gracias por la ayuda
Blas

Responder
JMiur  

blasblog:
No, en absoluto, debe ser el color de los textos y enlaces ¿Es posible verlo online? Sino, intenta ponerlo y fíjate el ID del elemento HTML; por ejemplo, si fuera id='HTML5' podrías intentar esto:

#HTML5 {color: #FFF !important;}
#HTML5 a {color: #FFF !important;}

antes de </b:skin>

No sé cuál script estás usando con exactitud.

Responder
blasblog  

querido Jmiur:
he incluido el widget que habìa mencionado en la pagina del blog:
si quieres o puedes dale una ojeada, asì puedes aconsejarme como mejorar la visiòn; te agradezco de antemano
saludos
Blas
pensierolibre@blogspot.com

Responder
JMiur  

Por lo que veo, usas un gadget de google. Si es así, salvo que el gadget tenga opciones, no veo la forma de hacerlo porque coloca un IFRAME. Si n otiene opciones, busca otro tipo de script más personalizable.

Responder
Anahí  

Qué buen post, acabo de descubrirlo, se me había pasado de largo.
Slds.

Responder
RafaMon  

Jmiur eres el mejor después de 3 meses y de leer mucha documentación has conseguido de que me entere de forma tan simple que sorprende.
Documentación hay mucha y buena tu clarividencia es única.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR