Sumario
La propiedad top
especifica parte de la posici贸n de un elemento posicionado. No tiene efecto en elementos no posicionados.
Para los elementos con una posici贸n absoluta (aquellos que tienen la propiedad position
: absolute
o position
: fixed
), determina la distancia entre el borde superior del elemento y el borde superior del bloque que lo contiene.
Para los elementos con una posici贸n relativa (aquellos que tienen la propiedad position
: relative
), determina el desplazamiento hacia abajo que tendr谩 el elemento con respecto a su posici贸n normal.
Cuando se define tanto la propiedad top
como bottom
para un elemento, y height
no se ha definido, tiene un valor auto
o 100%, tanto la distancia top
como bottom
se respetan. Si height
est谩 definida, la aplicaci贸n de la propiedad top
tiene precedencia y bottom
ser谩 ignorada.
- Valor inicial:
auto
- Aplicable a: Posicionar Elementos
- Heredable: no
- Porcentajes: se refieren a la altura del bloque contenedor.
- Medio:
visual
- Valor calculado: valor absoluto, porcentaje 贸 auto.
Sintaxis
top: <longitud> | <porcentaje> | auto | inherit
Ejemplos
/* se puede tambi茅n usar unidades px para posicionar body para luego operar con el div */ body{ width: 100%; height: 100%; } /* ahora podemos operar con unidades de porcentajes (con al 100% respecto de body) */ div{ position:absolute; left:15%; top:30%; bottom:30%; width:70%; height:40%; text-align:left; border: 3px rgb(0,0,0) solid; }
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml" /> <title>Mozzila.org height top left width porcentaje CSS</title> <style type="text/css"> /* se puede tambi茅n usar unidades px para posicionar body para luego operar con el div */ body{ width: 100%; height: 100%; } /* ahora podemos operar con unidades de porcentajes (con respecto al 100% del body) */ div{ position:absolute; left:15%; top:30%; bottom:30%; width:70%; height:40%; text-align:left; border: 3px rgb(0,0,0) solid; } </style> </head> <body> <center> <div> ...Contenido... </div> </center> </body> </html>
Especificaciones
Compatibilidad entre navegadores
Navegador | Versi贸n m铆nima |
---|---|
Internet Explorer | ? |
Firefox | 1 |
Netscape | ? |
Opera | ? |
Safari | ? |