Características position en CSS

Propiedad position en CSS describe cómo el elemento debe estar ubicado en el documento, las propiedades top, right, bottom y left determinar el lugar final de esos elementos.

Funciones position css

Valor inicial	`static`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	No
Valor calculado	Como se especificó.

/* palabras clave */ 
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
/* valores globales */ 
position: inherit;
position: initial;
position: unset;

Tipos de ubicaciones

Los elementos posicionados son aquellos cuya propiedad valor es position o bien relative, absolute, fixed o sticky(en otras palabras: cualquier valor excepto static).
Elemento es la posición relativa (elemento relativamente posicionado) es un elemento que es el valor de la propiedad position es relative, y determina los principales beneficios top y bottom el desplazamiento vertical desde la ubicación original, y determina los principales beneficios left y el right desplazamiento horizontal desde su lugar de origen.
El elemento con posicionamiento absoluto (elemento absolutamente posicionado) es un elemento que es el valor de la propiedad positiones absolute o fixed, e identifica las características top, right, bottom y left desplazó el elemento de los límites del elemento contenedor tiene (y este elemento del elemento Ktla y uno de los padres del artículo actual y estar relativamente en posición). Si el elemento tiene márgenes, se agregan al desplazamiento.
El elemento posicionado pegajosamente es el elemento cuyo valor de propiedad positiones sticky, el elemento será tratado como si lo fuera y relative después de que se exceda un cierto límite al pasar el mouse, será tratado como fixed.

Los valores de las dos propiedades height y width de los elementos posicionados absolutos generalmente se establecen en el valor auto para acomodar su contenido, pero si la posición del elemento no lo es en absoluto, puede establecer el valor de las dos propiedades top y bottom dejar la propiedad sin establecer height(es decir, su valor será el valor predeterminado auto), lo que hace que el elemento llene el espacio vertical disponible.

Se puede hacer lo mismo para llenar el espacio horizontal especificando el valor de las dos propiedades left y right dejando el valor de la propiedad width en auto. Sí height se width especifica alto o ancho, se aplicarán las siguientes reglas:

Si el valor de las dos propiedades está establecido top y bottom(es decir, su valor no es igual a auto), entonces la propiedad tiene prioridad top.
Si el valor de la left y right, los atributos se establece, la propiedad tiene prioridad left si la dirección del texto direction es de izquierda a derecha ltr(como en Inglés), y la propiedad tiene prioridad right si la dirección del texto direction es de derecha a izquierda rtl.

Ejemplos y aplicaciones en código

Elementos relativamente posicionados

Los elementos posicionados relativamente se desplazan desde su posición original dentro del documento, pero sin afectar al resto de los elementos. Observe en el siguiente ejemplo que el cuadro «Dos» reservará el espacio de su posición original.

Código HTML:

< div  class = "box"  id = "uno" > uno </ div > 
< div  class = "box"  id = "dos" > dos </ div > 
< div  class = "box"  id = "tres" > tres </ div > 
< div  class = "box"  id = "cuatro" > cuatro </ div >

Código CSS:

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 0.25em;
  background-color: salmon;
  color: white;
}
#two {
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #006699;
}

Elementos de posición absoluta

Los elementos en posición relativa permanecerán en la estructura organizativa normal del documento, a diferencia de los elementos en posición absoluta, que se sacan de contexto, por lo que la estructura organizativa del documento será como si los elementos en posición absoluta no existieran.

La ubicación de los elementos con una posición absoluta se definirá en relación con el primer elemento padre que tiene una posición especial (es decir, el padre más cercano no está en la posición static). Si no hay un padre para este elemento con una posición relativa, su posición será relativa al elemento <body> en el documento.

Código HTML:

< div  class = "box"  id = "uno" > uno </ div > 
< div  class = "box"  id = "dos" > dos </ div > 
< div  class = "box"  id = "tres" > tres </ div > 
< div  class = "box"  id = "cuatro" > cuatro </ div >

Código CSS:

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 0.25em;
  background-color: salmon;
  color: white;
  position: relative;
}
#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #006699;
}

Elementos de posición fija

Los elementos de posición fija ( fixed) son similares a los elementos de posición absoluta excepto que su elemento contenedor es una ventana gráfica, y estos elementos se pueden usar para crear elementos flotantes en la página que permanecerán en el mismo lugar incluso después de desplazarse hacia abajo.

En el siguiente ejemplo, el elemento «Uno» se mostrará 80 píxeles desde la parte superior de la página y 10 píxeles a la izquierda de la página, e incluso si se desplaza hacia la parte inferior, el elemento permanecerá en el mismo lugar en relación con la ventana gráfica.

Código HTML:

< div  class = "exterior" > 
  < p >
   Contenido de texto
  </ p > 
  < div  class = "box"  id = "uno" > uno </ div > 
</ div >

Código CSS:

.box {
  width: 100px;
  height: 100px;
  padding: 0.25em;
  background-color: salmon;
  color: white;
}
#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background-color: #006699;
}
.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

Artículos pegajosos

Podemos considerar elementos pegajosos como híbridos entre elementos relativos y constantes. Los elementos pegajosos se tratarán como relativos hasta que se exceda un cierto límite, momento en el que se volverán fijos. Por ejemplo, el código:

#one { position: sticky; top: 12px; }

Hará que el elemento con un identificador sea one relativo hasta que se desplace hasta que se mantenga a menos de 12px de la parte superior de ese elemento, después de lo cual el elemento será estático y se ubicará a 12px de la parte superior de la ventana gráfica.

Umbral se puede ajustar con al menos uno de los top, right, bottom o left, y si no se especifica uno de los anteriores, los elementos se comporta como un elemento posicionado relativo.

Código HTML:

< dl > 
  < div > 
    < dt > a </ dt > 
    < dd > llevar </ dd > 
    < dd > literatura </ dd > 
    < dd > recoger </ dd > 
    < dd > comer </ dd > 
    < dd > personas </ dd > 
  </ div > 
  < div > 
    <dt > b</ dt > 
    < dd > puerta </ dd > 
    < dd > inocente </ dd > 
    < dd > supervivencia </ dd > 
    < dd > tendero </ dd > 
    < dd > vendedor </ dd > 
  </ div > 
  < div > 
    < dt > c </ dt > 
    < dd > oraciones </ dd >
  </ div > 
  < div > 
    < dt > n </ dt > 
    < dd > fuego </ dd > 
    < dd > noble </ dd > 
    < dd > hijo </ dd > 
    < dd > mover </ dd > 
    < dd > Nawal </ dd > 
  </ div > 
</ dl >

Código CSS:

* {
  box-sizing: border-box;
}
dl > div {
  background: #FFF;
  padding: 24px 0 0 0;
}
dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}
dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}
dd + dd {
  border-top: 1px solid #CCC;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	4.0	7.0	1.0
valor pegajoso	56	32	No soportado	42	6.1 con el anterior `-webkit-`

Características general

La propiedad acepta position solo una de las palabras mencionadas en esta sección.

static

La posición del elemento se calcula en base a la estructura organizativa del documento, y las propiedades top, right, bottom, left y z-index, este es el valor por defecto.

relative

La posición del elemento se calcula en base a la estructura de la organización normal de la documento, a continuación, se desplaza con relación a su posición original en función de la top, right, bottom y left, y el offset no tendrá ningún efecto en el resto de los elementos, que es decir, el espacio reservado para el elemento en el diseño de página es el mismo que el espacio reservado si esta propiedad lo es static. La propiedad se puede utilizar z-index con el elemento.

absolute

El elemento se eliminará de la estructura organizativa del documento y no se le dará un lugar en el diseño de la página, sino que se colocará en relación con el elemento principal de posición relativa más cercana, o con el elemento <body>, y su posición final será determinada por la top, right, bottom y left, propiedades propiedad se puede utilizar z-index con el elemento. Los elementos absolutos pueden tener márgenes margin.

fixed

El elemento se eliminará de la estructura organizativa del documento, y no se le dará un lugar en el diseño de la página, sino que se coloca en relación con la vista, y su posición final será determinado por el top, right, bottom y left, y la lata propiedad ser utilizado z-index con el elemento. Si se imprime la página, el elemento se ubicará en el mismo lugar en cada página.

sticky

La posición del elemento se calcula en base a la estructura de la organización normal de la documento, a continuación, se desplaza con relación a su posición original en función de la top, right, bottom y left, y el offset no tendrá ningún efecto en el resto de los elementos. Cuando se pasa un límite, el comportamiento del elemento será similar al comportamiento de fixed.

Estructura position css

position: static | relative | absolute | sticky | fixed;

Consulte también

La página de cada una de las propiedades top, bottom, right y left responsable de localizar el elemento.
La página de propiedades float que especifica que el elemento debe colocarse a la izquierda o derecha del contenedor al que pertenece.