Los top, bottom, left, y rightpropiedades se utilizan con la posición para ajustar la colocación de un elemento. Solo tienen efecto sobre los elementos posicionados, que son elementos con la positionpropiedad establecida en cualquier otro valor que static. Por ejemplo: relative, absolute, fixed, o sticky.
div ( : || || auto || inherit; )Puede usarlo, por ejemplo, para colocar un icono en su lugar:
button .icon ( position: relative; top: 1px; )O coloque un elemento especial dentro de un contenedor.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )El valor de top, bottom, left, y rightpuede ser cualquiera de los siguientes:
- cualquiera de las longitudes válidas de CSS
- un porcentaje de la altura del elemento contenedor (para
topybottom) o el ancho (paraleftyright) autoinherit
El elemento generalmente se alejará de un lado dado cuando su valor sea positivo y hacia él cuando el valor sea negativo. En el siguiente ejemplo, una longitud positiva para topmueve el elemento hacia abajo (lejos de la parte superior) y una longitud negativa para topmoverá el elemento hacia arriba (hacia la parte superior):
Vea Pen
Top: valores positivos y negativos de Matsuko Friedland (@missmatsuko)
en CodePen.
Posición
La colocación de un elemento con un valor para top, bottom, left, o rightdepende de su valor para position. Echemos un vistazo a lo que sucede cuando establecemos el mismo valor para topen elementos con diferentes valores para position.
static
La toppropiedad no tiene ningún efecto sobre los elementos no posicionados (elementos con positionestablecido en static). Así es como se posicionan los elementos por defecto. Puede usarlo position: static;como un método para deshacer el efecto de topen un elemento.
relative
Cuando topse establece en un elemento con positionestablecido en relative, el elemento se moverá hacia arriba o hacia abajo en relación con su ubicación original en el documento.
Vea Pen
Top: pariente de Matsuko Friedland (@missmatsuko)
en CodePen.
absolute
Cuando topse establece en un elemento con positionestablecido en absolute, el elemento se moverá hacia arriba o hacia abajo en relación con su antepasado posicionado más cercano (o el documento, si no hay antepasados posicionados).
En esta demostración, el cuadro rosa de la izquierda se coloca 50px hacia abajo desde la parte superior de la página porque no tiene elementos ancestros posicionados. El cuadro rosa de la derecha se coloca 50px hacia abajo desde la parte superior de su padre, porque el padre tiene una positionde relative.
Vea Pen
Top: absoluto de Matsuko Friedland (@missmatsuko)
en CodePen.
fixed
Cuando topse establece en un elemento con positionestablecido en fixed, el elemento se moverá hacia arriba o hacia abajo en relación con la ventana del navegador.
Vea el Pen
Top: corregido por CSS-Tricks (@ css-tricks)
en CodePen.
A primera vista, puede parecer que no hay diferencia entre absolutey fixed. La diferencia se puede ver cuando los compara en una página que tiene suficiente contenido para desplazarse. A medida que se desplaza hacia abajo, el fixedelemento de posición siempre está a la vista, mientras que el absoluteelemento de posición se desplaza.
Vea el
desplazamiento del lápiz : fijo frente a absoluto mediante CSS-Tricks (@ css-tricks)
en CodePen.
sticky
Cuando topse establece en un elemento con positionestablecido en sticky, el elemento se moverá hacia arriba o hacia abajo en relación con el antepasado más cercano con un cuadro de desplazamiento (o la ventana gráfica, si ningún antepasado tiene un cuadro de desplazamiento), limitado a los límites de su elemento contenedor.
La configuración topde un stickyelemento posicionado no hace mucho a menos que su contenedor sea más alto de lo que es y tenga suficiente contenido para desplazarse. Al igual que con fixed, el elemento permanecerá a la vista mientras se desplaza. A diferencia fixed, el elemento desaparecerá de la vista una vez que alcance los bordes de su elemento contenedor.
Vea Pen
Scrolling: arreglado vs pegajoso por CSS-Tricks (@ css-tricks)
en CodePen.
Gotchas
Establecer lados opuestos
Se puede establecer un valor para cada uno de top, bottom, left, y righten un solo elemento. Cuando establece valores para lados opuestos ( topy bottom, o lefty right), es posible que el resultado no siempre sea el esperado.
En la mayoría de los casos, bottomse ignora si topya está configurado y rightse ignora si leftya está configurado. Cuando la dirección se establece en rtl(de derecha a izquierda), leftse ignora en lugar de right. Para que cada valor tenga un efecto, el elemento debe tener un positionconjunto en absoluteo fixedy un heightconjunto en auto(predeterminado).
En este ejemplo, hemos creado top, bottom, left, y righta `20px`, y esperamos que cada lado de la caja interior para ser 20 píxeles de distancia de los lados de la caja exterior:
Vea la
configuración del lápiz en la parte superior, inferior, izquierda y derecha de CSS-Tricks (@ css-tricks)
en CodePen.
Cuando se fija no es relativo a la ventana gráfica
Los elementos positionconfigurados en fixedno siempre se colocan en relación con la ventana gráfica. Se coloca en relación con su ancestro más cercano con una transform, perspectiveo filterconjunto de propiedades para que no sea nada none, si es que existe.
Agregar o quitar espacio
Si colocó un elemento y descubrió que ahora hay un espacio vacío o no hay suficiente espacio donde esperaba, es posible que tenga que ver con si el elemento está dentro o fuera del flujo del documento.
Cuando un elemento se elimina del flujo del documento, significa que el espacio que ocupaba originalmente en la página desaparece. Este es el caso cuando un elemento está posicionado absoluteo fixed. En este ejemplo, el cuadro contenedor del elemento absolutamente posicionado se ha colapsado porque el elemento absolutamente posicionado se eliminó del flujo del documento:
Consulte el
flujo de documentos de lápiz de Matsuko Friedland (@missmatsuko)
en CodePen.
Soporte del navegador
Puede echar un vistazo, pero no hay preocupaciones entre navegadores para la toppropiedad. Úselo a voluntad.