Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedades de nivel superior
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada óptimo Con sintaxis y ejemplos.
describir
La propiedad superior de CSS junto con la propiedad de posición define la posición superior de un elemento.
sintaxis
La sintaxis de la propiedad CSS superior es:
top: value;parámetro o parámetro
valor
El valor más alto al colocar un elemento utilizando la propiedad de posición. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | Un valor fijo en píxeles, em, etc. div {posición: relativa; superior: 10px; } div {posición: absoluta; superior: 5em; } |
| porcentaje | valor porcentual div {posición: fija; máx.: 15 %; } |
| carro | Este es el comportamiento predeterminado div { posición: relativa; superior: automático; } |
| heredar | Indica que el elemento heredará la parte superior de su elemento principal div {posición: heredar;} |
notas
- Cuando el valor se proporciona como un porcentaje, es relativo a la altura del bloque contenedor.
- Si la propiedad de posición se establece en relativa, absoluta o fija, puede establecer las propiedades superior, derecha, inferior e izquierda.
- Si la propiedad de posición se establece en estática, las propiedades superior, derecha, inferior e izquierda no se aplican.
- Consulte también las propiedades de posición, derecha, inferior e izquierda.
Compatibilidad del navegador
La propiedad superior de CSS tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Navegador de Internet (IE)
- Estático, Relativo, Absoluto: IE 4
- Corregido: IE 7
- ópera
- Safari (WebKit)
ejemplo
Discutiremos la propiedad superior a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
posición relativa
Veamos un ejemplo en el que establecemos la propiedad de posición en relativa y establecemos un valor para la propiedad superior.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: relative; top: 20px; left: 15px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en una posición relativa, la propiedad superior en 20 píxeles y la propiedad izquierda en 15 píxeles. Esto significa que el elemento div (identificado por la clase totn2) se moverá 20 píxeles hacia abajo y 15 píxeles hacia la izquierda en relación con el lugar en el que se colocaría en el diseño normal.
posición absoluta
Veamos qué sucede si tratamos de establecer la propiedad de posición del segundo div en absoluto y establecer un valor para la propiedad superior.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: absolute; top: 20px; left: 15px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en posición absoluta, la propiedad top en 20 px y la propiedad left en 15 px. Esto significa que el elemento div (identificado por la clase totn2) se moverá dentro de su contenedor principal a una posición absoluta de 20 px desde la parte superior del contenedor y 15 px desde el lado izquierdo del contenedor.
Entonces, en este ejemplo, el segundo div está en la parte superior del primer div (identificado por la clase totn1).
Posición fija
Veamos qué sucede si tratamos de establecer la propiedad de posición del segundo div en fijo y establecer un valor para la propiedad superior.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: fixed; top: 20px; left: 15px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en una posición fija, la propiedad superior en 20 píxeles y la propiedad izquierda en 15 píxeles. Esto significa que el elemento div (identificado por la clase totn2) se moverá dentro de la ventana gráfica de la pantalla a una posición fija de 20 píxeles desde la parte superior de la ventana gráfica y 15 píxeles desde la izquierda de la ventana gráfica.
Se ve muy similar al resultado del ejemplo de posición absoluta. La única excepción es que cuando nos desplazamos usando el ejemplo de posición fija, el segundo div (identificado por la clase totn2) permanecerá fijo en la ventana gráfica de la pantalla y no se desplazará fuera de la pantalla.