
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 bienrelative
,absolute
,fixed
osticky
(en otras palabras: cualquier valor exceptostatic
). - Elemento es la posición relativa (elemento relativamente posicionado) es un elemento que es el valor de la propiedad
position
esrelative
, y determina los principales beneficiostop
ybottom
el desplazamiento vertical desde la ubicación original, y determina los principales beneficiosleft
y elright
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
position
esabsolute
ofixed
, e identifica las característicastop
,right
,bottom
yleft
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
position
essticky
, el elemento será tratado como si lo fuera yrelative
después de que se exceda un cierto límite al pasar el mouse, será tratado comofixed
.
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
ybottom
(es decir, su valor no es igual aauto
), entonces la propiedad tiene prioridadtop
. - Si el valor de la
left
yright
, los atributos se establece, la propiedad tiene prioridadleft
si la dirección del textodirection
es de izquierda a derechaltr
(como en Inglés), y la propiedad tiene prioridadright
si la dirección del textodirection
es de derecha a izquierdartl
.
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
yleft
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.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS