Usar posiciones absolutas para ubicar un elemento de manera precisa en una página web es uno de los métodos más cómodos porque requiere propiedades que cualquier navegador entiende y nos evita agregar márgenes, paddings y flotaciones que siempre perturban ya que afectan al resto de las etiquetas.
Es sencillo, basta agregarle a ese elemento la propiedad position:absolute y luego, establecer los valores de top, right, bottom y/o left teniendo en cuenta que:
top:0; left:0; es el ángulo superior izquierdo
top:0; right:0; es el ángulo superior derecho
bottom:0; left:0; es el ángulo inferior izquierdo
bottom:0; right:0; es el ángulo inferior derecho
o sea, los cuatro extremos de ... ¿qué? Esa es la clave; tener la respuesta es lo que evita los problemas.
Las posiciones absolutas no son absolutas en abstracto, lo son, con respecto a algo: a un contenedor. Toda etiqueta está dentro de un contenedor, es decir, dentro de otra etiqueta; por ejemplo, esta imagen está dentro de una etiqueta DIV (su contenedor) que a su vez, está dentro de un DIV que es el contenedor de ambas, que está dentro de otro DIV que es el contenedor de las tres . Yendo "hacia atrás" o "hacia arriba" el contenedor padre sería el mismo BODY:
Es sencillo, basta agregarle a ese elemento la propiedad position:absolute y luego, establecer los valores de top, right, bottom y/o left teniendo en cuenta que:
top:0; left:0; es el ángulo superior izquierdo
top:0; right:0; es el ángulo superior derecho
bottom:0; left:0; es el ángulo inferior izquierdo
bottom:0; right:0; es el ángulo inferior derecho
o sea, los cuatro extremos de ... ¿qué? Esa es la clave; tener la respuesta es lo que evita los problemas.
Las posiciones absolutas no son absolutas en abstracto, lo son, con respecto a algo: a un contenedor. Toda etiqueta está dentro de un contenedor, es decir, dentro de otra etiqueta; por ejemplo, esta imagen está dentro de una etiqueta DIV (su contenedor) que a su vez, está dentro de un DIV que es el contenedor de ambas, que está dentro de otro DIV que es el contenedor de las tres . Yendo "hacia atrás" o "hacia arriba" el contenedor padre sería el mismo BODY:
<body>
.......
<div>
<div>
<div>
<img src="URL_IMAGEN" />
</div>
</div>
</div>
.......
</body>Por defecto, se vería algo así:
Si agregáramos position:absolute a la etiqueta IMG ¿dónde se vería?
<img src="URL_IMAGEN" style="position: absolute; right: 0; top: 0;" />
Eso no depende de las propiedades de la imagen sino de las propiedades de su contenedor ya que es este el que define cuáles son los "límites" del rectángulo, cuáles son las coordenadas 0:0 y lo elemental es que definamos eso agregándole a ese contenedor, la propiedad position:relative.
Si el primer DIV tiene esa propiedad, se verá así:
Si el primer DIV tiene esa propiedad, se verá así:
position:relative
Y si el segundo DIV tiene esa propiedad, se verá así:
position:relative
Y si el tercer DIV tiene esa propiedad, se verá así:
position:relative
Los valores de top, right, bottom y left también pueden ser negativos y eso, hará que el elemento se "salga" de su contenedor:
<img src="URL_IMAGEN" style="position: absolute; right: 0; top: -50px;" />
position:relative
Pero ... siempre hay un pero, no se verá o se verá parcialmente si los contenedores tienen agregada la propiedad overflow:hidden:
23 comentarios:
Excelente explicación JMiur, hace un tiempo tuve un problema al respecto porque precisamente confundía esos 'algos'.
overflow:hidden <---- Esta propiedad quiere decir que lo que "sobresale" del cuadro no se muestra, cierto? Es obvio pero hay que asegurarse de que no refiera a la parte que está dentro del recuadro.
mi admiración!
Una vez más me dejas sin palabras, por la explicación tan clara, concisa y desarrollada con una lógica aplastante. ¡Chapó!
Gracias Jorge por éstas 'clases' (no sé si te gusta que te llamen maestro), aprendemos sí :D
qué levante la mano a quien alguna vez lo mareó el "position" :S
Hola JMiur, buen tuto!,
Yo tuve problemas hace tiempo en posicionar muchos elementos en un mismo contenedor, y que se viera igual en todos los navegadores.
Luego buscando, encontré cierta técnica de la que se habla mucho que es la superposición de capas(overlay) en donde la clave para posicionar algo arriba de otro algo es precisamente declaran una capa contenedora en posición relativa y la otra en absoluta, si funciona, sin embargo a veces cuando hay muchos elementos sigue siendo un tema de rompedera de cabeza, porque se está escapando algo, por ejemplo, "como afectan ciertas propiedades"...
Pienso que la clave es aprender a ver a la plantilla como un todo, así como lo ilustras: "un rectángulo dentro de otro rectángulo" porque eso es, y hacerlo desde afuera hacia adentro, ya que si nos concentramos solo en esa parte donde estamos queriendo posicionar algún elemento, tendremos problemas...
Por más experimentado que se pueda ser siempre pasa algo que te saca de onda y que requrirá más esfuerzo y pensamiento analítico, pero se aprende, y ¿qué chiste tendría saberlo todo y no descubrir nuevas cosas?, ¿verdad?, eso si que sería aburrido...
Gracias JMiur por todo el tiempo que dedicas, te lo digo en nombre de todos los que nunca lo hacen por alguna razón, suena tonto, pero creo que alguno por ahí, seguramente se ha quedado con las ganas, jaja...
Que tengas un día super! ;)
A la hora de diseñar el blog, hay que tener en cuenta lo que tu has explicado. Porque la posicion relativa o la absoluta nos da mucho juego a la hora de mejorar el look de nuestra pagina. Y siempre conviene ver nuestro blog desde varios angulos y varias resoluciones para observar los posibles fallos de la disposicion de los elementos. Saludos.
sometimes we like to be confused also with attributes ;)
Pués si, Felipe, es algo que nos pasa a todos.
egoloco:
No entiendo muy bien el comentario pero, imagino que te refieres a que si se usa overflow:hidden también debe definirse ancho y alto del elemento.
NMitra, m.p.moreno, gracias por los comentarios :-$
Graciela:
No, maestro, ni loco !!!!!!!!!! :D
Ya la levanté, EDS :D
Karla:
Sí, la técnica es siempre esa, declarar un contenedor con relative y el contenido con absolute. El resto, claro, depende de todos los otros detalles que son infinitos.
Sin duda, se debe tratar de entender que una página web es un todo y hay dos claves; saber que todo elemento es un rectángulo que ocupa cierto espacio y saber que las propiedades se heredan. Digo dos pero podría haber muchas más, claro :D
Johnny:
Efectivamente, si se entiende la idea, es una de las técnicas más simples y de las más flexibles.
That's right, Beben Koben
hola JMiur!!
hace rato que te quiero preguntar pero nunca el post para hacerlo.
creo que este me va a ayudar!!
la cosa es así tengo tengo tres divs, elementos o como sea que se llamen :$
<div id="contenedor">
<a class="miniatura" href="http://epidemia-mella.blogspot.com/2011/08/sala-de-salud.html">
<img alt="" src="http://dl.dropbox.com/u/17851544/Publicidad/salita.png" />
<span><img alt="" src="http://dl.dropbox.com/u/17851544/Publicidad/actu%C3%A1.png" /></span>
</a>
</div>
en este momento los tengo puesto en el footer uno al lado del otro. hasta ahi no hay problema porque el footer está divido en tres con lo cual lo ubico uno al lado del otro y ya.
mi problema surge porque quiero que estos mismos tres elementos aparezcan en los post indiduales, y encima de estos no hay división como en footer. entonces los pongo a todos dentro de un contenedor, pero me aparecen uno encima del otro, y uno uno al lado del otro como me gustaría.
lo que quiero saber es a que queden uno al lado del otro aun estando en el mismo espacio, o a dividir el en tres el espacio que está por encima de los post.
espero que puedas ayudarme y que se halla entendido lo que quise explicar.
muchas gracias!!!
No sé cuál es el sitio donde intentas hacer eso. Evidentemente, lo que te falta es agregar las propiedades CSS de esos contenedores.
Bueno, entonces son clases que compartís con nosotros :P
Mejor así aunque eso de "clases" lo quitaría y lo cambiaría por la palabra "recreo" :-D
Hola, en primera quiero agradecerte por todos los contenidos que nos brindas a todos. Son excelentes.
Quisiera saber si me podrías ayudar con un problema que no he dado en el blanco. Te explico: tengo un contenedor con 'min-height', ya que así crecerá al colocar elementos en el; y posición relativa. El problema es que cuando coloco los elementos con posición absoluta y ubicandolo con 'left' y 'top' el contenedor no crece, por lo tanto los elementos se ven encimados a los de otros contenedores.
.FondoPrin{
background: #00CCCC;
width: 600px;
min-height: 30px;
margin-left:auto;
margin-right: auto;
position: relative;
}
.MarcoMensajes{
border: #990000;
border-style: double;
width: 300px;
min-height: 5px;
left: 30px;
top: 15px;
position: absolute;
margin-bottom: 5px;
}
¿Esta mal? ¿Como podriamos solucionarlo?
Así en abstracto es imposble saberlo, debería ver un ejemplo online para entender la idea.
Hola, yo tengo una duda, he puesto una galería en una página estática de mi blog, y me gustaría ajustar las imágenes de tal manera que se viera igual, independientemente de la resolución que tenga cada monitor que me visite, es decir, que se ajuste la imagen a la vista, sin necesidad de usar scrolls. Es esto posible? Te adjunto una imagen:
http://i777.photobucket.com/albums/yy54/G3isha/FOROVAGOS/galeria_zpsc9dd21d9.png
Eso dependerá de la forma en que está creado y del contexto en el que esté colocado. Deberías buscar modelos de tipo responsive para darte una idea de los datos a tener en cuenta y las propiedades que se deben usar.
Hola, viendo lo que comentan, creo que me pueden ayudar y espero que si se pueda:
Tengo una página y donde tengo problema es en un contenedor de en medio que esta dividido en dos Izquierda y Derecha en el de la Derecha tengo un < script > lo estoy haciendo en DW y en la pantalla de DISEÑO se ve bien pero cuando lo pruebo en el navegador no queda bien posicionad, es un formulario de getResponsive para hacer captura de datos y ya que lo coloco en el < div > Derecha me lo de en un lugar que no debería de estar sino en la parte magenta, le dejo la pagina y e código y de ante mano gracias.
http://www.vacacionesparaelalma.com/
CSS
.banner{
height: 690px;
}
body{
background:url(../fondo/landingMalinalco.jpg);
background-position: top center;
background-repeat:no-repeat;
height:1320px;
width: 1420px;
}
.derecha{
position: absolute right: 0 top: 0;
width:390px;
}
.izq{
width: 928px;
height: 603px;
}
.izq, .derecha{
float: left;
}
.margen{
margin-left: 50px;
width: 200px;
}
.redes{
width: 1150px;
}
.margen, .redes{
float:left;
}
Estás usando direcciones absloutas para todo y eso, hará que la página se vea de modo diferente en distintas resoluciones de pantalla.
Por otro lado, la regla que escribes dice:
position: absolute right: 0 top: 0;
y allí falta el punto y coma entre absolute y right
muchas gracias por al ayuda, pero ya le estuve cambiando y no me sale, no me podrías orientar un poco,que es lo que tendría que hacer, por fa
si estas definiendo un ancho máximo de 767.5px para el contenedor principal y el derecho un ancho del 33.8%, significa que ese tendrá unos 259 pixeles de ancho así que un elemento interno que tiene un ancho de 399 (#WFItem1355604), desborda
lo que se ven son demasiadas reglas duplicadas y contradictorias entre si con propiedades excesivas definidas porcentualmente algunas y en pixeles otras
Muchas, gracias, lo volveré hacer y tendré más cuidado en las reglas y y lo haré con %
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...