elementos (la propiedad position) en el posicionamiento de CSS

CSS | propiedad position: Aquí, vamos a aprender acerca de la propiedad posición en CSS, vamos a aprender cómo colocar los elementos en HTML usando CSS?

CSS | propiedad de posición

class Idea:

Posicionamiento, una herramienta muy importante en el CSS para el estilo y para hacer una página web presentable, no obstante integral. Al hacer una página web varias entidades deberían estar colocadas de manera que un usuario puede tener una idea clara sobre la página web y su contenido.

se debe hacer con mucho cuidado tanto el posicionamiento. Uno de los elementos aquí y otra, la página web comenzarían apariencia opaca.

propiedad de posición

posición es una propiedad de CSS para posicionar los elementos en una página web. El posicionamiento se puede hacer con respecto al elemento padre o elemento relativo.

Hay principalmente 5 tipos de propiedades de posición en CSS saber,

  1. fijo
  2. Abstract
  3. relativa
  4. absoluta
  5. pegajosa

La posición se puede hacer con la ayuda de la parte superior , derecho , inferior y dejó propiedad. Se utilizan para designar la distancia de un elemento HTML desde el borde de la ventana gráfica. Para posicionar el elemento, haciendo uso de estas cuatro propiedades, primero, tenemos que declarar el método de posicionamiento.

Ahora vamos a hablar de cada uno de los bienes posicionamiento en detalle,

1)

posición: fijo

El elemento HTML usando la posición de la propiedad : fijo estará orientada en relación con el área de visualización. Como su nombre indica esta propiedad se utiliza para fijar la posición de un elemento. Incluso si alguien desea para desplazarse hacia arriba o abajo la página el elemento no se moverán de su posición. Podemos establecer el posicionamiento mediante el empleo superior , derecho , parte inferior izquierda y .

Sintaxis:

Element {
position: fixed;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
}
</style>
</head>
<body>
<div class="fixed">fixed element</div>
<div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>
</html>

salida

Positioning elements (The position property) in CSS - 4

En el ejemplo anterior, el elemento fijo está posicionado con respecto a la ventana del navegador.

2) Posición: static

posición: class es una propiedad class del posicionamiento. Esto significa que si no es un atributo de la colocación se establece como la parte superior, derecha, abajo y de izquierda, entonces la propiedad se establece en class por class. Cuando la propiedad se establece a continuación, class arriba, derecha, izquierda y atributos inferiores tienen ningún control sobre ese elemento. El elemento se coloca de acuerdo con el flujo normal de la página.

Sintaxis:

Element {
position: static;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
}
</style>
</head>
<body>
<div class="static">static element</div>
<div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>
</html>

salida

Positioning elements (The position property) in CSS - 5

En el ejemplo anterior, los rollos de elementos class abajo con el otro contenido.

3) Posición: relative

El position: relative propiedad se utiliza para ajustar la posición del elemento con respecto a los elementos en la parte superior de la misma. Eso significa que el posicionamiento relativo. Si nos fijamos atributos de los elementos como la parte superior, izquierda y derecha, entonces el hueco dejado por este elemento no será llenado por cualquier otro elemento.

Sintaxis:

Element {
position: relative;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div.rel {
position: relative;
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
}
</style>
</head>
<body>
<div class="rel">relative element</div>
<div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>
</html>

salida

Positioning elements (The position property) in CSS - 6

En el ejemplo anterior, el elemento es relativa a su posición normal.

4) position: absolute

El posición: absoluta propiedad se utiliza para establecer la posición de un elemento con respecto a su padre. Si utilizamos la propiedad absoluta, entonces el posicionamiento del elemento no dependerá de sus hermanos u otro elemento relativo.

Sintaxis:

Element {
position: absolute;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div.abs {
position: absolute;
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
}
</style>
</head>
<body>
<div class="abs">absolute element</div>
<div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>
</html>

salida

Positioning elements (The position property) in CSS - 7

En el ejemplo anterior, el elemento se coloca en relación a su primera posición.

) Posición 5: pegajoso

Los elementos utilizando la posición propiedad : pegajosas y superior: 0 jugará un papel entre fijo y relativa. Esto significa que si un usuario quiere desplazarse hacia arriba la página, entonces el elemento con la propiedad adhesiva también comenzará a moverse hasta que toque la parte superior. Ahora, cuando el elemento alcanza la parte superior que permanecerá fijo allí a pesar de cualquier desplazamiento adicional. También podemos utilizar la propiedad inferior para pegar el elemento en la parte inferior de la página.

Sintaxis:

Element {
position: sticky;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: sticky;
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
}
</style>
</head>
<body>
<div class="sticky">sticky element</div>
<div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>
</html>

salida

Positioning elements (The position property) in CSS - 8

En el ejemplo anterior, incluso si se desplaza por la página de la posición del elemento pegajosa es fijo.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *