Embedded Files
Position
Position
La propiedad position en CSS se utiliza para especificar cómo se posiciona un elemento en la página. Hay cinco valores que se pueden asignar a position:
static
static
Este es el valor por defecto. Los elementos se posicionan según el flujo normal del documento y donde las propiedades top, right, bottom, left y z-index no tienen efecto.
.caja1{
height: 50px;
width: 50px;
background-color: greenyellow;
border: 2px solid green;
position: static;
}
relative
relative
El elemento se posiciona relativo a su posición original sin cambiar la disposición de los elementos circundantes. Esto significa que el elemento todavía ocupa su espacio original en el flujo del documento, aunque visualmente puede estar desplazado gracias a las propiedades top, right, bottom, y left.
.caja1{
height: 50px;
width: 50px;
background-color: greenyellow;
border: 2px solid green;
position: relative;
top: 20px; left: 20px;
}
absolute
absolute
El elemento se saca del flujo del documento, y no afecta la posición de otros elementos. Se posiciona relativo a su contenedor más cercano con posición no estática (relative, absolute, o fixed), o al contexto de formato inicial si no hay tal contenedor.
.caja1{
height: 50px;
width: 50px;
background-color: greenyellow;
border: 2px solid green;
position: absolute;
top: 20px; left: 20px;
}
fixed
fixed
El elemento se saca del flujo del documento y se posiciona relativo al viewport (área visible de la página). Se mantiene fijo cuando la página se desplaza.
.caja1{
height: 50px;
width: 50px;
background-color: greenyellow;
border: 2px solid green;
position: fixed;
top: 20px; left: 20px;
}
sticky
sticky
Es una mezcla entre relative y fixed. Un elemento con position: sticky se basa en el desplazamiento del usuario y "se pega" a una posición en el viewport cuando alcanza un punto umbral específico, definido por top, right, bottom, o left.
.caja1{
height: 50px;
width: 50px;
background-color: greenyellow;
border: 2px solid green;
position: sticky;
top: 20px; left: 20px;
}
Page updated
Google Sites
Report abuse