En este artículo, veremos qué es la propiedad de posición, cómo usar esta propiedad sabiamente para crear páginas web. La propiedad position se usa para alinear los diferentes elementos en la página HTML. Position Property juega un papel importante para hacer páginas web de alta calidad.
Hay 5 propiedades de posición en CSS:
- estático (predeterminado)
- pariente
- absoluto
- fijado
- pegajoso
Sintaxis:
selector{
position: value;
}
value = static, relative, absolute, fixed, sticky
Entendamos cada una de estas propiedades una por una.
1. position: static Es el valor de posición por defecto del elemento. Bajo posición estática, elementos posicionados según el flujo normal de la página.
Nota: las propiedades izquierda, derecha, superior e inferior no afectarán si la posición es estática.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.purple {
height: 200px;
width: 200px;
color: black;
font-size: 1.5rem;
padding: 10px;
background-color: purple;
}
.cyan {
position: static;
font-size: 1.5rem;
padding: 10px;
height: 200px;
width: 200px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="purple">
I am reference
</div>
<div class="cyan">
I am static element
</div>
</body>
</html>
Producción:
2. Posición: Relativa En este caso, el elemento permanece en el flujo normal del documento pero afecta a la izquierda, derecha, arriba y abajo. Los elementos se desplazan de su posición original en el documento creando espacio vacío y otros elementos pueden ajustarse según el espacio vacío dejado por el elemento.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.purple {
height: 200px;
width: 200px;
color: black;
font-size: 1.5rem;
padding: 10px;
background-color: purple;
}
.cyan {
position: relative;
left: 100px;
top: 90px;
font-size: 1.5rem;
padding: 10px;
height: 200px;
width: 200px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="purple"> I am reference </div>
<div class="cyan"> I am relative element </div>
</body>
</html>
Producción:
Explicación: Podemos ver aquí que el elemento cambia su izquierda y su parte superior desde la posición original creando algo de espacio.
3. posición: absoluto Los elementos absolutos no siguen el documento de flujo normal sino que se posicionan en relación con el ancestro más cercano posicionado . Su posición final se determina utilizando la parte superior, inferior, izquierda y derecha.
Nota: El elemento posicionado significa elemento que tiene una propiedad de posición diferente a la estática.
Estos elementos no ocupan ningún espacio y otros elementos tratan a los elementos absolutos como si no hubiera ningún elemento. El elemento principal debe colocarse y la propiedad de posición no es absoluta y si el elemento principal no está posicionado, el elemento absoluto se posicionará de acuerdo con el antepasado más cercano. Generalmente establecemos el índice z cuando usamos la posición absoluta.
Considere dos casos para entender la posición absoluta:
1er caso: cuando el valor de la propiedad principal está posicionado , significa que la propiedad de posición del principal no es igual a estática.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.purple {
position: relative;
height: 200px;
width: 200px;
color: black;
font-size: 1.5rem;
padding: 10px;
background-color: purple;
}
.cyan {
position: absolute;
bottom: 10px;
left: 70px;
font-size: 1.5rem;
padding: 10px;
height: 100px;
width: 100px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="purple">
I am positioned and parent
<div class="cyan"> I am absolute element </div>
</div>
</body>
</html>
Producción:
Explicación: Aquí podemos ver que el elemento secundario se ha ajustado de acuerdo con el principal y no se le asigna espacio adicional.
2do Caso: Cuando el elemento padre no está posicionado .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.purple {
position: static;
height: 200px;
width: 200px;
color: black;
font-size: 1.5rem;
padding: 10px;
background-color: purple;
}
.cyan {
position: absolute;
bottom: 10px;
left: 70px;
font-size: 1.5rem;
padding: 10px;
height: 100px;
width: 100px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="purple">
I am not-positioned and parent
<div class="cyan"> I am absolute element </div>
</div>
</body>
</html>
Producción:
Explicación: como el padre no está posicionado, el elemento hijo intentará ajustarse en relación con el antepasado posicionado más cercano. Aquí el ancestro posicionado más cercano es <HTML>, por lo que el elemento se ajusta de acuerdo con <HTML>.
4. posición: fijo El elemento fijo no sigue el flujo normal del documento y se posiciona en relación con la etiqueta <HTML>. Este elemento siempre se pega a la pantalla.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.purple {
position: relative;
height: 2000px;
width: 200px;
color: black;
font-size: 1.5rem;
font-family: sans-serif;
padding: 10px;
background-color: purple;
}
.cyan {
position: fixed;
top: 200px;
left: 10px;
padding: 10px;
font-size: 1rem;
color: black;
height: 100px;
width: 100px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="purple">
I am reference
<div class="cyan">
I am fixed element
</div>
</div>
</body>
</html>
Producción:
Puede ver que el elemento fijo permanece en su posición incluso después de desplazarse hacia arriba y hacia abajo.
5. posición: pegajosa Es un poco complicado pero muy fácil de entender. Podemos pensar en sticky como una combinación de relativo y fijo. Recuerde que en el elemento fijo permanecerá fijo en alguna posición, pero en el elemento adhesivo se comportará como relativo a cierto punto y luego se comportará como fijo.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.purple {
position: absolute;
height: 2000px;
width: 200px;
color: black;
font-size: 1.5rem;
font-family: sans-serif;
padding: 10px;
background-color: purple;
}
.cyan {
position: sticky;
top: 10px;
left: 0px;
padding: 10px;
font-size: 1rem;
color: black;
height: 100px;
width: 100px;
background-color: cyan;
z-index: 2;
}
.yellow {
padding: 10px;
position: relative;
height: 100px;
width: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="purple">
<div class="yellow">I am reference</div>
<div class="cyan">
I am sticky element
</div>
<div class="yellow">I am reference</div>
</div>
</body>
</html>
Producción:
Explicación: en el resultado anterior, puede ver que el elemento adhesivo se comporta como un elemento relativo hasta que alcanza un desplazamiento particular. Luego, más allá de ese punto, se adhiere a la página y se comporta como fijo (aquí, ese desplazamiento es de 10 px desde la parte superior).
Nota: En sticky left, right, top y bottom no determina la posición del elemento en el estado relativo pero especifica en qué posición el elemento debe comportarse como fijo.