left

  • Enlace amigable (slug) de la revisión: CSS/left
  • Título de la revisión: left
  • Id de la revisión: 294863
  • Creada:
  • Creador: ethertank
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

{{ Traducción("inglés", "CSS:center", "en-US") }}

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 {{ Cssxref("position") }}: absolute ó position: fixed), la propiedad left determina la distancia entre el margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.

  • {{ Xref_cssinitial() }}: {{ Cssxref("auto") }}
  • Se aplica a: positioned elements
  • {{ Xref_cssinherited() }}: no
  • Porcentajes: referente a la altura del bloque contenedor.
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: valor absoluto, porcentaje o auto.

Sintaxis

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

Valores

{{ Xref_csslength() }}
Una longitud, un valor negativo, cero, un valor positivo.
{{ Xref_csspercentage() }}
Un porcentaje del ancho del bloque contenedor.

Ejemplos

{{ CSSLiveSample("css-positioning.html") }}

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

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

Especificaciones

Compatibilidad entre navegadores

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 5.5 5.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1") }} 6.0 6.0 1.0

Ver también

  • {{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}

Fuente de la revisión

<div>{{ Traducción("inglés", "CSS:center", "en-US") }}</div>

<h2 id="Sumario" name="Sumario">Sumario</h2>
<p>La propiedad <code>left</code> especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).</p>
<p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}<code>: absolute</code> ó <code>position: fixed</code>), la propiedad left determina la distancia entre el margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.</p>
<ul class="cssprop">
  <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li>
  <li>Se aplica a: <a href="/es/docs/CSS/position" title="es/docs/CSS/position">positioned elements</a></li>
  <li>{{ Xref_cssinherited() }}: no</li>
  <li>Porcentajes: referente a la altura del bloque contenedor.</li>
  <li>Media: {{ Xref_cssvisual() }}</li>
  <li>{{ Xref_csscomputed() }}: valor absoluto, porcentaje o auto.</li>
</ul>
<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
<pre class="eval">
left: &lt;length&gt; | &lt;percentage&gt; | auto | inherit ;
</pre>
<h3 id="Valores" name="Valores">Valores</h3>
<dl>
  <dt>
    {{ Xref_csslength() }}</dt>
  <dd>
    Una longitud, un valor negativo, cero, un valor positivo.</dd>
  <dt>
    {{ Xref_csspercentage() }}</dt>
  <dd>
    Un porcentaje del ancho del bloque contenedor.</dd>
</dl>
<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
<p>{{ CSSLiveSample("css-positioning.html") }}</p>
<pre class="brush:css;">
#example_3 {
  width: 600px;
  height: 400px;
  background-color: #FFC7E4;
  position: relative;
  top: 20px;
  left: 20px;
}

#example_4 {
  width: 200px;
  height: 200px;
  background-color: #FFD7C2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}</pre>
<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left">CSS 2.1</a></li>
  <li><a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a></li>
</ul>
<h2 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>5.5</td>
        <td>5.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>6.0</td>
        <td>6.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2>
<ul>
  <li>{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}</li>
</ul>
Revertir a esta revisión