Propiedad CSS top
La propiedad CSS top especifica la posición superior de un elemento junto con la propiedad position. Encuentra ejemplos y pruébalos tú mismo.
La propiedad CSS top establece la posición vertical de un elemento posicionado, medida desde el borde superior de un bloque de referencia. Por sí sola no hace nada — solo surte efecto cuando el elemento tiene también un valor de position distinto al predeterminado static.
Esta página explica cómo se comporta top con cada valor de position, las unidades que puedes utilizarle, los errores comunes y cómo se combina con bottom, left y right.
Cómo funciona top
El bloque de referencia desde el que se mide top — y el significado del desplazamiento — depende de la position del elemento:
position: absoluteofixed—topdesplaza el elemento desde el borde superior de su bloque contenedor (enabsolute, el ancestro posicionado más cercano; enfixed, el viewport). Un valor mayor detopempuja el elemento hacia abajo.position: relative—topdesplaza el elemento hacia abajo desde donde normalmente estaría, sin afectar el diseño de los elementos circundantes. El espacio que ocupaba originalmente se conserva.position: sticky—topes la distancia desde la parte superior del contenedor de desplazamiento en la que el elemento "se adhiere" mientras se hace scroll.top: 0lo hace adherirse al borde superior.position: static—topse ignora por completo. Este es el valor predeterminado, por lo que siempre debes establecerpositionprimero.
Si se especifican tanto top como bottom en un elemento posicionado absolutamente cuya altura es auto, el elemento se estira para satisfacer ambos; en caso contrario, top tiene prioridad y se ignora bottom.
Se permiten valores negativos — top: -20px desplaza un elemento posicionado de forma absoluta o fija por encima de su borde de referencia, y desplaza un elemento posicionado de forma relativa por encima de su posición normal.
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos posicionados. |
| Se hereda | No. |
| Animable | Sí. |
| Versión | CSS2 |
| Sintaxis DOM | Object.style.top = "50px"; |
Sintaxis
Sintaxis de la propiedad CSS top
top: auto | length | initial | inherit;Ejemplo de la propiedad top:
Ejemplo de la propiedad CSS top con valor de longitud
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #8ebf42;
height: 200px;
width: 600px;
position: relative;
}
p {
margin: 0;
color: #eee;
position: absolute;
border: 2px solid #666;
}
.ex1 {
top: 0;
}
.ex2 {
top: 50px;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Resultado
Ejemplo de la propiedad top con un valor negativo:
Ejemplo de la propiedad CSS top con valor negativo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #666;
height: 200px;
position: relative;
}
p {
margin: 0;
color: #fff;
}
.top {
position: absolute;
top: -35px;
color: #000000;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p>Some text.</p>
<p class="top">Text with the top property.</p>
</div>
</body>
</html>Ejemplo de la propiedad top definida en "pt", "%" y "em":
Ejemplo de la propiedad top con valores "pt", "%" y "em":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #8ebf42;
height: 200px;
width: 600px;
position: relative;
}
p {
margin: 0;
color: #eee;
position: absolute;
border: 2px solid #666;
}
.ex1 {
top: 5em;
}
.ex2 {
top: 10pt;
}
.ex3 {
top: 75%;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
<p class="ex3">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| auto | Establece la posición del borde superior. Es el valor predeterminado de esta propiedad. | Pruébalo » |
| length | Establece la posición del borde superior con px, cm, etc. Se permiten valores negativos. | Pruébalo » |
| % | Establece la posición del borde superior con % del elemento contenedor. Se permiten valores negativos. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Cuando usas un valor porcentual, se calcula en relación con la altura del bloque contenedor, no con su anchura. Así, top: 50% en un elemento posicionado absolutamente lo desplaza hacia abajo la mitad de la altura del padre.
Errores comunes
- Olvidar
position.topno tiene efecto en un elementostatic. Si tu desplazamiento parece ignorado, verifica quepositionesté establecido enrelative,absolute,fixedosticky. - Falta de ancestro posicionado. Un elemento
absolutese desplaza desde su ancestro posicionado más cercano. Si no existe ninguno, recurre al bloque contenedor inicial (la raíz del tamaño del viewport). Dale al padreposition: relativepara contenerlo. stickyno se adhiere.position: stickysolo funciona mientras el elemento se desplaza dentro de un ancestro que realmente tenga desbordamiento. Un valortopsin un contenedor con scroll, o un padre conoverflow: hidden, parecerá no hacer nada.- Usar tanto
topcomobottom. En un elemento absoluto con alturaautolo estiran; de lo contrario,toptiene prioridad y se descartabottom.
Propiedades relacionadas
- position — necesaria para que
toptenga efecto. - bottom, left, right — las otras propiedades de desplazamiento, usadas junto con
toppara posicionar elementos. - z-index — controla el orden de apilamiento cuando los elementos posicionados se superponen.