La propiedad top en CSS se usa para describir la posición superior de un elemento. La propiedad superior varía con la posición del elemento.
- Si el valor de posición es fijo o absoluto, el elemento ajusta su borde superior con respecto al borde superior de su elemento principal o del bloque que lo contiene.
- Si el valor de posición es relativo, el elemento se posiciona con respecto a su propio borde superior actual.
- Si el valor de la posición es estático, el elemento no tiene ningún efecto debido a la propiedad superior.
Sintaxis:
top: length| initial| inherit| auto;
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
longitud: esta propiedad se utiliza para especificar la posición superior de un elemento. El valor de longitud puede ser negativo, nulo o positivo. El valor de la longitud puede estar en forma de px, cm, etc.
Ejemplo: Este ejemplo ilustra el uso de la propiedad de longitud que se usará para establecer la posición del borde superior en px, cm, etc.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS top Property </title>
<!-- CSS property used here -->
<style>
.gfg1 {
position: relative;
top: 00px;
width: 400px;
height: 250px;
border: 2px solid black;
}
.gfg2 {
position: absolute;
top: 50px;
border: 1px solid green;
}
.gfg3 {
position: relative;
top: 150px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="gfg1">
Main block with position: relative and top: 0px
<div class="gfg2">
Sub block-1 with position: absolute and top: 50px
</div>
<div class="gfg3">
Sub block-2 with position: relative and top: 150px
</div>
</div>
</body>
</html>
Producción:
initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado. La palabra clave inicial se puede utilizar para cualquier propiedad CSS y en cualquier elemento HTML.
Ejemplo: este ejemplo ilustra el uso de la propiedad inicial para establecer el valor en su valor predeterminado.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS top Property </title>
<!-- CSS property used here -->
<style>
.gfg1 {
position: relative;
width: 400px;
height: 150px;
border: 2px solid black;
}
.gfg2 {
position: absolute;
top: 50px;
border: 1px solid green;
}
.gfg3 {
position: relative;
top: initial;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="gfg1">
Main block with position: relative and top: 0px
<div class="gfg2">
Sub block-1 with position: absolute and top: 50px
</div>
<div class="gfg3">
Sub block-2 with position: relative and top: initial
</div>
</div>
</body>
</html>
Producción:
heredar : esta propiedad se usa para heredar una propiedad a un elemento del valor de propiedad de su elemento principal. La palabra clave de herencia se puede utilizar para heredar cualquier propiedad CSS y en cualquier elemento HTML.
Ejemplo: este ejemplo ilustra el uso de la propiedad de herencia para heredar las propiedades del valor de propiedad de su elemento principal.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS top Property </title>
<!-- CSS property used here -->
<style>
.gfg1 {
position: relative;
width: 400px;
height: 150px;
border: 2px solid black;
}
.gfg2 {
position: absolute;
top: 50px;
}
.gfg3 {
position: absolute;
top: inherit;
}
</style>
</head>
<body>
<div class="gfg1">
Main block with position: relative and top: 0px.
<div class="gfg2">
Sub block-1 with position: absolute and top: 50px.
<div class="gfg3">
Sub block-2 with position: absolute and top: inherit.
</div>
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad superior se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 5.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 6.0
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por charithareddy4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA