
Una propiedad top en CSS que determina la posición vertical de un elemento posicionado. Esta propiedad no tiene ningún efecto sobre los elementos no posicionados.
Funciones top css
Valor inicial | auto |
---|---|
Aplicado a | Elementos posicionados. |
Heredable | No |
Móvil | Sí |
Valor calculado | Como se especifica, pero con longitudes relativas convertidas a absolutas. |
/* <longitud> valores */ top: 3px; top: 2.4em; /* <porcentajes> valores relativos */ /* tomados en relación con la altura del bloque contenedor del elemento */ top: 10%; /* es una palabra reservada */ top: auto; /* valores globales */ top: inherit; top: initial; top: unset;
El efecto de la propiedad top
depende del valor de la propiedad position
:
- Cuando la propiedad se establece
position
enabsolute
ofixed
, la propiedadtop
establece la distancia entre el borde superior del elemento y el borde superior de su bloque contenedor. - Cuando la propiedad se establece
position
enrelative
, la propiedadtop
determina cuánto se moverá el borde superior del elemento sobre su posición normal. - Pero cuando la propiedad se establece
position
ensticky
, la propiedadtop
actuará como si la posición del elementorelative
fuera cuando está en la ventana gráfica, yfixed
actuará como si no estuviera en la ventana gráfica. - Cuando la propiedad se establece
position
enstatic
(es decir, el elemento no puede cambiar su ubicación), la propiedadtop
no tendrá ningún efecto.
Cuando se especifican valores para las propiedades top
y bottom
, el valor de la propiedad height
no está definido o era auto
o 100%
, los valores asignados a top
y bottom
. Si se utiliza el valor de la propiedad, la propiedad tiene height
prioridad y se top
ignorará bottom
.
Ejemplos y aplicaciones en código
Este ejemplo muestra el uso de la palabra reservada auto
con un elemento <div>
de posición absoluta:
< div class = "parent" > < span > elemento principal del contenedor </ span > < div class = "actual" > posición real </ div > </ div >
Código CSS:
.parent { background-color: #f8f9fa; padding: 1em; height: 150px; } .actual { position: absolute; top: auto; background-color: #310736; color: white; box-sizing: border-box; width: 250px; height: 2em; padding: 0.25em; text-align: center; opacity: 0.9; }
Ejemplo de uso de un valor longitudinal <length>
con la posición del elemento relative
establecida en relativa a través de la propiedad position
. Observe cómo el elemento se moverá hacia abajo en relación con su posición original:
.parent { background-color: #f8f9fa; padding: 1em; height: 150px; } .actual { position: relative; top: 20px; background-color: #310736; color: white; box-sizing: border-box; width: 250px; height: 2em; padding: 0.25em; text-align: center; opacity: 0.9; }
Y este ejemplo trata sobre el uso de la propiedad top
con un elemento cuya posición es absoluta:
.parent { background-color: #f8f9fa; padding: 1em; height: 150px; position: relative; } .actual { position: absolute; top: 0; background-color: #310736; color: white; box-sizing: border-box; width: 250px; height: 2em; padding: 0.25em; text-align: center; opacity: 0.9; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 5 | 6 | 1.0 |
Características generales
<length>
Un valor longitudinal <length>
negativo o positivo que representa:
- La distancia entre el borde superior del elemento y el borde superior de su bloque contenedor. Si la posición del elemento es absolutamente (absolutamente posicionado)
- La distancia que el borde superior del elemento se moverá por encima de su posición normal. Esto es si el elemento está relativamente posicionado.
<percentage>
Un porcentaje de la altura del bloque que contiene el elemento.
auto
- Si la posición del elemento es absoluta, este valor hará que la posición del elemento se determine en función de la propiedad
bottom
. - Si la posición del elemento es relativa, este valor establecerá la posición del elemento según la propiedad
bottom
desde la posición inicial del elemento, y si la propiedad tambiénbottom
es igualauto
, el elemento no se moverá verticalmente.
Estructura top css
top: <length> | <percentage> | auto;
Consulte también
- La página de propiedades
position
que describe cómo se coloca el objeto en el documento. - La página de cada una de las propiedades
bottom
,right
yleft
responsable de ubicar el elemento.
- ¿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