Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Sumario

La propiedad left especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

Para los elementos con una posición absoluta (aquellos que tienen la propiedad position: absolute ó position: fixed), la propiedad left determina la distancia entre el margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.

Valor inicialauto
Applies topositioned elements
Heredableno
Percentagesrefer to the width of the containing block
Mediavisual
Valor calculadoif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typea length, percentage or calc();
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

left: <length> | <percentage> | auto | inherit ;

Valores

<length>
Una longitud, un valor negativo, cero, un valor positivo.
<percentage>
Un porcentaje del ancho del bloque contenedor.

Ejemplos

CSS

#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5C5C5C;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

#example_1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #D8F5FF;
}

#example_2 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0;
  right: 0;
  background-color: #C1FFDB;

}
#example_3 {
  width: 600px;
  height: 400px;
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #FFD7C2;
}

#example_4 {
  width:200px;
  height:200px;
  position:absolute;
  bottom:10px;
  right:20px;
  background-color:#FFC7E4;
}

HTML

<div id="wrap">
  <div id="example_1">
    <pre>
      position: absolute;
      left: 20px;
      top: 20px;
    </pre>
    <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p>
  </div>

  <div id="example_2">
    <pre>
      position: relative;
      top: 0;
      right: 0;
    </pre>
    <p>Relative position in relation to its siblings.</p>
  </div>

  <div id="example_3">
    <pre>
      float: right;
      position: relative;
      top: 20px;
      left: 20px;
    </pre>
    <p>Relative to its sibling div above, but removed from flow of content.</p>

    <div id="example_4">
      <pre>
        position: absolute;
        bottom: 10px;
        right: 20px;
      </pre>
      <p>Absolute position inside of a parent with relative position</p>
    </div>
  </div>
</div>

Especificaciones

Compatibilidad entre navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 o anterior) 5.5 5.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: Sebastianz, SphinxKnight, teoli, ethertank, Mgjbot, fiorella, HenryGR
Última actualización por: Sebastianz,