| Definición | Indica el desplazamiento entre el borde superior del elemento y la parte superior de su elemento contenedor |
|---|---|
| Valores permitidos | Alguno o todos los siguientes valores y en cualquier orden: |
| Si se utilizan porcentajes, hace referencia a la altura del elemento en el que se encuentra | |
| Valor inicial | auto |
| Se aplica a | Los elementos posicionados |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS2/visuren.html#propdef-top |
Ejemplos de uso
La propiedad top permite desplazar un elemento respecto a su posición original tomando como referencia el borde superior del elemento. Por su propia definición, esta propiedad sólo afecta a los elementos cuya propiedad position tenga un valor de relative, absolute o fixed.
El siguiente ejemplo muestra tres cajas idénticas posicionadas de forma relativa (position: relative) y que sólo se diferencian en el valor de su propiedad top:
top: -10px;
}
top: 0;
}
top: 10px;
}
Los valores positivos en la propiedad top hacen que la caja baje respecto a su posición original. En otras palabras, la propiedad top: 10px se interpreta de la siguiente manera: "baja la caja hasta que su borde superior quede a 10px de distancia de la posición que originalmente tenía ese borde superior".
De la misma manera, los valores negativos en la propiedad top hacen que la caja suba respecto a su posición original. En otras palabras, la propiedad top: -10px se interpreta de la siguiente manera: "sube la caja hasta que su borde superior quede a 10px de distancia de la posición que originalmente tenía ese borde superior".
Para indicar el valor de la propiedad top puedes utilizar cualquiera de las medidas definidas por CSS. En el siguiente ejemplo, los valores 10px y -10px del ejemplo anterior se han reemplazado por 1em y -1em respecticamente. Este cambio hace que la caja suba/baje más o menos en función del propio tamaño de letra de esa caja:
top: 1em;
}
top: 0;
}
top: -1em;
}
Si el valor de la propiedad top se indica mediante porcentajes, su referencia es la altura de la caja que contiene a la caja que quieres mover, es decir, su caja padre. Por lo tanto, la propiedad top: 50% desplazaría la caja hacia abajo una distancia igual a la mitad de la altura de su caja padre. Por este motivo, los desplazamientos indicados en porcentaje no funcionan a menos que indiques explícitamente la altura de la caja padre.
En el siguiente ejemplo, el <div> que encierra a los tres <div> posicionados no tiene establecida ninguna altura, por lo que el valor de su propiedad height es auto. En este caso, el desplazamiento indicado en porcentajes no funciona y los tres <div> se ven igual:
top: 0;
}
top: 25%;
}
top: -25%;
}
Sin embargo, si en el mismo ejemplo anterior se establece explícitamente la altura del <div> padre a 80px, ahora sí que se aplica el desplazamiento a los <div> interiores (como la altura del <div> padre es 80px y el desplazamiento es 25%, las cajas se moverán 20px respecto de su posición original):
top: 0;
}
top: 25%;
}
top: -25%;
}
La propiedad top se puede utilizar por ejemplo para desplazar ligeramente los enlaces dentro de un texto cuando se pasa el ratón por encima:
(pasa el ratón por encima de los enlaces, sin pinchar en ellos)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
El código CSS utilizado en el ejemplo anterior es tan sencillo como:
a:hover {
position: relative;
top: -2px;
}Otro truco habitual es desplazar hacia abajo ligeramente los enlaces al pinchar sobre ellos:
(al pinchar los enlaces de este texto, se desplazan hacia abajo. Para poder ver bien el efecto, pincha sobre los enlaces pero no sueltes el ratón)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
El código CSS utilizado en el ejemplo anterior es tan sencillo como:
a:active {
position: relative;
top: 1px;
}Si el elemento que se quiere desplazar con la propiedad top está posicionado de forma absoluta (position: absolute), la interpretación del valor de la propiedad top es muy diferente. En este caso, el origen de coordenadas es el borde superior de la caja que hace de referencia del posicionamiento absoluto, es decir, el borde superior de la caja padre.
top: 0;
position: absolute;
}
top: 50px;
position: absolute;
}
top: -50px;
position: absolute;
}
Como se muestra en el ejemplo anterior, si el desplazamiento es excesivo, la caja desplazada puede salirse de los límites de la caja padre en la que está contenido.
Cuando el elemento que se desplaza está posicionado de forma absoluta, los valores de la propiedad top indicados mediante porcentajes se interpretan de la misma manera que en los elementos posicionados de forma relativa. Por tanto, si la caja padre tiene una altura de 300px y el desplazamiento es del 10%, en realidad la caja se está desplazando 30px:
top: 0;
position: absolute;
}
top: 10%;
position: absolute;
}
top: -10%;
position: absolute;
}