Top

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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.

Sintaxis

   top: <longitud> | <porcentaje> | auto | inherit

Ejemplos

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 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;
}
html
<?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

Specification
CSS Positioned Layout Module Level 3
# insets

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
top
anchor()
Experimental
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Ver también