Características position en CSS

Características position en CSS

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

Funciones position css

Valor inicialstatic
Aplicado aTodos los artículos.
HeredableNo
MóvilNo
Valor calculadoComo 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 relativeabsolutefixedsticky(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 topbottom 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 absolutefixed, e identifica las características toprightbottomleft 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 heightwidth 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 topbottom 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 leftright 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 topbottom(es decir, su valor no es igual a auto), entonces la propiedad tiene prioridad top.
  • Si el valor de la leftright, 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 toprightbottomleft, 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ísticaChromeFirefoxIEÓperaSafari
Soporte básico1.01.04.07.01.0
valor pegajoso5632No soportado426.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 toprightbottomleftz-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 toprightbottomleft, 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 toprightbottomleft, 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 toprightbottomleft, 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 toprightbottomleft, 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 topbottomrightleft 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.