Curso de Css. Posicionamiento Absoluto, Relativo y Fixed.
Cuando trabajamos con divs, estos suelen colocarse en el flujo natural de la página, es decir si en una página web etiquetamos un párrafo y después creamos un bloque div, este se situará, en el caso de no aplicar ningún float, debajo del párrafo. Como hemos explicado en alguna ocasión el bloque div se adapta siempre al recipiente que lo contiene, ya sea otro div, una celda de una tabla, etc. Pero en ocasiones puede interesarnos colocar los div, en lugares específicos de la página, sin necesidad de estar supeditados a otro elemento de la misma. Esto se consigue gracias al posicionamiento absoluto, que nos permite colocar cualquier elemento en distintas partes de las páginas, utilizando para ello un juego de coordenadas.
Para entender esto, lo mejor es ejemplificarlo. Para ello vamos a crear un par de bloques divs con un título h2 incluido y un párrafo cualquiera aislado y los situaremos en distintas posiciones. El html de la página de ejemplo sería este:
1 2 3 4 5 6 7 |
Vamos a crear unos marcos en los bloques div, para clarificar mejor el ejemplo y les daremos unas medidas de ancho y alto. También daremos estilo al párrafo contenido en los divs, para centrarlo un poco. La hoja de estilo se irá presentando así:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | #div1 { border:1px solid gray; width:100px; height:100px; background-color:silver; } #div1 h2 { margin-top:30px; text-align:center; } #div2 { border:1px solid gray; width:100px; height:100px; background-color:olive; } #div2 h2 { margin-top:30px; text-align:center; } |
El navegador presentaría la siguiente página por pantalla:
Como podemos apreciar, los elementos se presentan en pantalla, siguiendo el curso natural de colocación de la página o según hemos establecido en el marcado html.
Ahora probaremos a aplicar al div-2 un posicionamiento absoluto, junto con unas coordenadas de colocación en la página. Modificamos la hoja de estilo, añadiendo estas nuevas propiedades de css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | #div1 { border:1px solid gray; width:100px; height:100px; background-color:silver; } #div1 h2 { margin-top:30px; text-align:center; } #div2 { position:absolute; <---- Propiedad añadida. top:25px; <---- Propiedad añadida. left:60px; <---- Propiedad añadida. border:1px solid gray; width:100px; height:100px; background-color:olive; } #div2 h2 { margin-top:30px; text-align:center; } |
Resultando en el navegador:
Hemos aplicado el posicionamiento absoluto al div2, colocándolo con un margen superior de 25px y un margen izquierdo de 60px. Estas distancias son relativas. Posteriormente explicaremos el porqué de esta afirmación. En este caso en particular estas distancias toman como referencia, las coordenadas de la pantalla del navegador.
Estas coordenadas se calculan, tomando como referencia la esquina superior izquierda, que sería la coordenada (0,0) ó mejor dicho (top:0,left:0;). Por tanto al aplicar las coordenadas (top:25px;left:60px;), estamos diciendo que queremos colocar el div a un margen del borde superior del elemento contenedor, en este caso la pantalla del navegador, de 25px y a un margen izquierdo de 60px.
Algunos pensarán que el posicionamiento absoluto es muy parecido a aplicar float a un elemento, pero la realidad es que son cosas muy distintas, veamos porqué. Si os fijais el párrafo «Soy un párrafo cualquiera» se mantiene a la misma distancia o margen a la que se encontraba del div-1. Visualmente puede parecer que el div-2 antecede al párrafo y aplicando margen inferior o bottom, el párrafo lo podriamos distanciar del div-2, al igual que ocurría con los elementos flotantes o los que se les había aplicado la propiedad float. Pero esto no sucederá. Si haceis la prueba, comprobareis que no hace ningún efecto. Para que quede más clara la diferencia entre aplicar float y aplicar posicionamiento absoluto quedaros con este concepto:
Imaginaros que tenemos una página web a la vista y encima ponemos un cristal transparente. Pues bién, la propiedad float hace que los elementos floten en dicha página y podemos aplicar margen, para distanciarlos de otros elementos de la página. El posicionamiento absoluto aplicado a un elemento sería como cojer ese elemento y pegarlo en una posición que hemos dado en el cristal, aplicar margen no sirve para nada, solo podemos separarlo o colocar los elementos con posicionamiento absoluto, utilizando coordenadas préviamente calculadas.
Para que quede más clara la explicación, aplicaremos ahora el posicionamiento absoluto al div-1, cambiando solo la coordenada left y dejándolo con el mismo margen superior o top:0; y un margen inferior o bottom de 200px. la hoja de estilo quedaría así:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | #div1 { position:absolute; <---- Propiedad añadida. top:0; <---- Propiedad añadida. left:160px; <---- Propiedad añadida. border:1px solid gray; width:100px; height:100px; background-color:silver; margin-bottom:200px; <---- Propiedad añadida. } #div1 h2 { margin-top:30px; text-align:center; } #div2 { position:absolute; top:25px; left:60px; border:1px solid gray; width:100px; height:100px; background-color:olive; } #div2 h2 { margin-top:30px; text-align:center; } |
Resultando en el navegador:
Al aplicar el posicionamiento absoluto al div-1, es como sacarlo de la página y pegarlo en el cristal en las coordenadas dadas. La propiedad margen-bottom no tiene ningún efecto ni en la página ni en el cristal o ventana del navegador. Al sacar el div-1 de la página y colocarlo en una posición absoluta en la ventana del navegador, el párrafo ocuparía la posición en la página que antes tenía div-1.
Posicionamiento relativo.
Para ver en que consiste el posicionamiento relativo, vamos a modificar un poco nuestro código html, dejándolo así:
1 2 3 4 5 6 7 8 9 |
Tan solo hemos quitado el párrafo intermedio y hemos creado un nuevo div contenido en div-2 y lo hemos llamado div-3. Ahora lo que haremos será modificar un poco la hoja de estilo que se presentará de la siguiente manera:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | #div1 { border:1px solid gray; width:100%; height:70px; background-color:silver; } #div1 h2 { margin-top:30px; text-align:center; } #div2 { border:1px solid gray; width:100%; min-height:100%; background-color:silver; } #div2 h2 { margin-top:30px; text-align:center; } #div2 #div3 { border:1px solid gray; width:100px; height:100px; background-color:olive; } #div2 #div3 h3 { margin-top:30px; text-align:center; } |
Resultando en el navegador:
En la pantalla que muestra el navegador podemos ver que hemos creado un primer div (DIV-1), que ocupa todo el ancho disponible de la pantalla. Un segundo div (DIV-2), que al igual que el primero ocupa toda la pantalla y que a su vez contiene o sirve de contenedor a un tercer div (DIV-3). Ahora veamos que ocurre al aplicar posicionamiento absoluto al DIV-3, con unas coordenadas determinadas. La hoja de estilo quedará así:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | #div1 { border:1px solid gray; width:100%; height:70px; background-color:silver; } #div1 h2 { margin-top:30px; text-align:center; } #div2 { border:1px solid gray; width:100%; min-height:100%; background-color:silver; } #div2 h2 { margin-top:30px; text-align:center; } #div2 #div3 { position:absolute; <---- Propiedad añadida. top:25px; <---- Propiedad añadida. left:60px; <---- Propiedad añadida. border:1px solid gray; width:100px; height:100px; background-color:olive; } #div2 #div3 h3 { margin-top:30px; text-align:center; } |
Resultando en el navegador:
Como hemos visto antes, al aplicar el posicionamiento absoluto a un elemento, este se presenta en una posición dada en la ventana del navegador, como dijimos a modo aclaratorio, se pega al cristal y lo sacamos de la página. Pero ¿Cómo podemos hacer para situar un elemento en un determinado sitio y que este coja de referencia las coordenadas del elemento donde está contenido y no las coordenadas que el navegador toma como referencia?, la respuesta es sencilla, hay que aplicar el posicionamiento relativo. Veamos por ejemplo que ocurre si cambiamos la hoja de estilo y añadimos la propiedad posicionamiento relativo al div-2:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | #div1 { border:1px solid gray; width:100%; height:70px; background-color:silver; } #div1 h2 { margin-top:30px; text-align:center; } #div2 { position:relative; <---- Propiedad añadida. border:1px solid gray; width:100%; min-height:100%; background-color:silver; } #div2 h2 { margin-top:30px; text-align:center; } #div2 #div3 { position:absolute; top:25px; left:60px; border:1px solid gray; width:100px; height:100px; background-color:olive; } #div2 #div3 h3 { margin-top:30px; text-align:center; } |
Resultando en el navegador:
Añadiendo el posicionamiento relativo al DIV-2, el DIV-3 toma como coordenada referencia (0,0) la esquina superior izquierda del DIV-2 donde esta incluido o contenido, en vez de la esquina superior izquierda de la ventana del navegador. Podemos establecer coordenadas para situar los elementos posicionados de forma relativa y ello afectará a los elementos posicionados de forma absoluta que contengan. Veámoslo. Modifiquemos una vez más la hoja de estilo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | #div1 { border:1px solid gray; width:100%; height:70px; background-color:silver; } #div1 h2 { margin-top:30px; text-align:center; } #div2 { position:relative; top:60px; <---- Propiedad añadida. border:1px solid gray; width:100%; min-height:100%; background-color:silver; } #div2 h2 { margin-top:30px; text-align:center; } #div2 #div3 { position:absolute; top:25px; left:60px; border:1px solid gray; width:100px; height:100px; background-color:olive; } #div2 #div3 h3 { margin-top:30px; text-align:center; } |
Resultando en el navegador:
Conclusión: El posicionamiento relativo tiene en cuenta la posición en la página que ocupe el elemento al que se le aplica esta propiedad. En cambio el posicionamiento absoluto toma como referencia las coordenadas del elemento con posición relativa donde este incluido, o si no existe este, toma como referencia la pantalla del navegador.
Por último decir que a parte de top y left, para especificar las coordenadas también existen las propiedades bottom y right.
Posicionamiento Fixed.
Si queremos que un elemento aparezca siempre visible en una determinada posición de la pantalla del navegador, con independencia de que utilizando las barras laterales o de desplazamiento de ventana la página suba o baje, hay que utilizar el posicionamiento fixed. Su modo de uso es igual a los anteriores tipos de posicionamiento, también acepta coordenadas para situar los elementos. Veamos un ejemplo. Tenemos la siguiente página html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <div id="div1"> <h2>DIV-1.</h2> </div> <div id="div2"> <h2>DIV-2.</h2> </div> <div id="div3"> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex.Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidit lorem maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit. Ea mei nullam facete, omnis oratio offendit ius cu. Doming takimata repudiandae usu an, mei dicant takimata id, pri eleifend inimicus euripidis at. His vero singulis ea, quem euripidis abhorreant mei ut, et populo iriure vix. Usu ludus affert voluptaria ei, vix ea error definitiones, movet fastidii signiferumque in qui. Vis prodesset adolescens adipiscing te, usu mazim perfecto recteque at, assum putant erroribus mea in. Vel facete imperdiet id, cum an libris luptatum perfecto, vel fabellas inciderint ut. Veri facete debitis ea vis, ut eos oratio erroribus. Sint facete perfecto no vel, vim id omnium insolens. Vel dolores perfecto pertinacia ut, te mel meis ullum dicam, eos assum facilis corpora in.Mea te unum viderer dolores, nostrum detracto nec in, vis no partem definiebas constituam. Dicant utinam philosophia has cu, hendrerit prodesset at nam, eos an bonorum dissentiet. Has ad placerat intellegam consectetuer, no adipisci mandamus senserit pro, torquatos similique percipitur est ex. https://creativecommons.org/licenses/by-sa/3.0/deed.es </div> |
Hemos creado tres divs, el primero lo utilizaremos de cabecera, el segundo de barra lateral de navegación por ejemplo y en el tercero incluiremos un texto a modo de contenido de la página. La hoja de estilo que en principio utilizaremos será la siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | #div1 { border:1px solid gray; width:100%; height:70px; background-color:silver; } #div1 h2 { margin-top:30px; text-align:center; } #div2 { float:left; border:1px solid gray; width:120px; min-height:100%; background-color:silver; } #div2 h2 { margin-top:30px; text-align:center; } #div3 { border:1px solid gray; width:100px; height:100px; background-color:olive; } #div2 #div3 h3 { margin-top:30px; text-align:center; } |
Resultando en el navegador:
Si ahora aplicamos a varios div el posicionamiento fixed, de tal forma:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | #div1 { position:fixed; border:1px solid gray; width:100%; height:70px; background-color:silver; } #div1 h2 { margin-top:30px; text-align:center; } #div2 { position:fixed; float:left; border:1px solid gray; width:120px; min-height:100%; background-color:silver; } #div2 h2 { margin-top:30px; text-align:center; } #div3 { border:1px solid gray; width:100px; height:100px; background-color:olive; } #div2 #div3 h3 { margin-top:30px; text-align:center; } |
Resultando en el navegador:
Ahora si desplazamos la barra de scroll lateral, comprobaremos como el div1 y el div2 se mantienen fijos en pantalla, solo se desplazaría el texto o div3. Esto puede ser útil en una página web, en la que queramos que siempre permanezca visible determinada información, ya sea un menú de enlaces, anuncios de publicidad, etc.
Bueno ya con esto damos por concluida la parte referente al posicionamiento con css. Para cualquier duda o aclaración dejarme un comentario.