En esta lección se presenta el concepto de posicionamiento.
Es posible cambiar el modelo de cajas, usando un método que permita controlar por coordenadas la posición de algunos elementos dentro de la ventana. Para ello se utilizan las siguientes propiedades:
positionControla la forma de colocar un elemento en la ventana.
Los valores que puede tomar se explican a lo largo de esta lección y son:
staticEs el posicionamiento normal y no usa las propiedades de posicionamiento.
fixedEs relativo a la ventana del navegador.
relativeEs relativo a la posición normal del elemento.
absolute
Es relativo a la posición de su ancestro más inmediato que no
tenga posicionamiento
static.
sticky
Usa posicionamiento
relative
mientras el elemento está en el área visible de la ventana y se
vuelve
fixed
cuando sale del área visible de la ventana.
top
Posición de la parte superior del elemento con respecto a la
posición original (posicionamiento
relative) o al elemento
contenedor.
bottom
Posición de la parte inferior del elemento con respecto a la
posición original (posicionamiento
relative) o al elemento
contenedor.
left
Posición de la parte izquierda del elemento con respecto a la
posición original (posicionamiento
relative)
o al elemento contenedor.
right
Posición de la parte izquierda del elemento con respecto a la
posición original (posicionamiento
relative)
o al elemento contenedor.
widthAncho de un elemento. Se indica usando un número decimal, opcionalmente fraccionario, seguido de la unidad.
heightAltura de un elemento. Se indica usando un número decimal, opcionalmente fraccionario, seguido de la unidad.
z-index
Los elementos se pueden colocar en capas y ocultarse unos a otros.
Un elemento se coloca sobre los elementos hermanos con
posicionamiento no
static
que aparecen antes en el texto. La propiedad
z-index
se usa para cambiar ese orden. El número
z-index
más grande está arriba y tapa a todos los que tienen un valor
menor. Empieza desde 1.
fixed| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" |
| 6 | content="width=device-width"> |
| 7 | <title> |
| 8 | Posicionamiento fixed |
| 9 | </title> |
| 10 | <style> |
| 11 | span { |
| 12 | position: fixed; |
| 13 | top: 0; |
| 14 | right: 0; |
| 15 | background-color: yellow; |
| 16 | } |
| 17 | </style> |
| 18 | </head> |
| 19 | <body> |
| 20 | <h1> |
| 21 | Posicionamiento |
| 22 | <span>fixed</span> |
| 23 | </h1> |
| 24 | </body> |
| 25 | </html> |
relative| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" |
| 6 | content="width=device-width"> |
| 7 | <title> |
| 8 | Posicionamiento relative |
| 9 | </title> |
| 10 | <style> |
| 11 | span { |
| 12 | position: relative; |
| 13 | top: 1rem; |
| 14 | left: 1rem; |
| 15 | background-color: yellow; |
| 16 | } |
| 17 | </style> |
| 18 | </head> |
| 19 | <body> |
| 20 | <h1> |
| 21 | Posicionamiento |
| 22 | <span>relative</span> |
| 23 | </h1> |
| 24 | </body> |
| 25 | </html> |
absolute| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" |
| 6 | content="width=device-width"> |
| 7 | <title> |
| 8 | Posicionamiento absolute |
| 9 | </title> |
| 10 | <style> |
| 11 | h1 { |
| 12 | position: absolute; |
| 13 | bottom: 0; |
| 14 | height: 6rem; |
| 15 | left: 2rem; |
| 16 | right: 2rem; |
| 17 | background-color: yellow; |
| 18 | } |
| 19 | |
| 20 | p { |
| 21 | position: relative; |
| 22 | background-color: chartreuse |
| 23 | } |
| 24 | |
| 25 | footer { |
| 26 | position: fixed; |
| 27 | top: 0; |
| 28 | right: 0; |
| 29 | width: 10rem; |
| 30 | background-color: yellow; |
| 31 | } |
| 32 | |
| 33 | span { |
| 34 | position: absolute; |
| 35 | top: 0; |
| 36 | left: 0; |
| 37 | background-color: cyan; |
| 38 | } |
| 39 | </style> |
| 40 | </head> |
| 41 | <body> |
| 42 | <h1> |
| 43 | Posicionamiento |
| 44 | <span>absolute (h1)</span> |
| 45 | </h1> |
| 46 | Bla, bla, bla |
| 47 | <p> |
| 48 | Párrafo relative con |
| 49 | <span>absolute (p)</span> |
| 50 | </p> |
| 51 | <div> |
| 52 | Este div contiene |
| 53 | <span>absolute (div)</span> |
| 54 | </div> |
| 55 | <footer> |
| 56 | Este footer lleva otro |
| 57 | <span>absolute (footer)</span> |
| 58 | </footer> |
| 59 | </body> |
| 60 | </html> |
sticky| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" |
| 6 | content="width=device-width"> |
| 7 | <title> |
| 8 | Posicionamiento sticky |
| 9 | </title> |
| 10 | <style> |
| 11 | h1 { |
| 12 | /* Algunas versiones de Safari |
| 13 | * no soportan "sticky", pero sí |
| 14 | * "-webkit-sticky". */ |
| 15 | position: -webkit-sticky; |
| 16 | position: sticky; |
| 17 | top: 1rem; |
| 18 | background-color: yellow; |
| 19 | } |
| 20 | </style> |
| 21 | </head> |
| 22 | <body> |
| 23 | <h1>Posicionamiento sticky</h1> |
| 24 | <ol> |
| 25 | <li>X</li> |
| 26 | <li>X</li> |
| 27 | <li>X</li> |
| 28 | <li>X</li> |
| 29 | <li>X</li> |
| 30 | <li>X</li> |
| 31 | <li>X</li> |
| 32 | <li>X</li> |
| 33 | <li>X</li> |
| 34 | <li>X</li> |
| 35 | <li>X</li> |
| 36 | <li>X</li> |
| 37 | <li>X</li> |
| 38 | <li>X</li> |
| 39 | <li>X</li> |
| 40 | <li>X</li> |
| 41 | <li>X</li> |
| 42 | <li>X</li> |
| 43 | <li>X</li> |
| 44 | <li>X</li> |
| 45 | <li>X</li> |
| 46 | <li>X</li> |
| 47 | <li>X</li> |
| 48 | <li>X</li> |
| 49 | <li>X</li> |
| 50 | <li>X</li> |
| 51 | <li>X</li> |
| 52 | <li>X</li> |
| 53 | <li>X</li> |
| 54 | <li>X</li> |
| 55 | <li>X</li> |
| 56 | <li>X</li> |
| 57 | <li>X</li> |
| 58 | <li>X</li> |
| 59 | <li>X</li> |
| 60 | <li>X</li> |
| 61 | <li>X</li> |
| 62 | <li>X</li> |
| 63 | </ol> |
| 64 | </body> |
| 65 | </html> |
En esta lección se revisaron los siguientes conceptos:
Propiedades de posicionamiento
El posicionamiento fixed
El posicionamiento relative
El posicionamiento absolute
El posicionamiento sticky