path: root/files/es/web/css/position/index.html

---
title: position
slug: Web/CSS/position
tags:
  - Referencia_CSS
translation_of: Web/CSS/position
---
<div>{{CSSRef}}</div>

<p>La propiedad <strong><code>position</code></strong> de <a href="/en-US/docs/CSS" title="CSS">CSS</a> especifica cómo un elemento es posicionado en el documento. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y {{Cssxref("left")}} determinan la ubicación final de los elementos posicionados.</p>

<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div>

<p class="hidden">El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si quisiera contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos sus contribuciones como un pull request.</p>

<h3 id="Tipos_de_posicionamiento">Tipos de posicionamiento</h3>

<ul>
 <li>Un <strong>elemento posicionado </strong>es un elemento cuyo valor <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> de <code>position</code> es <code>relative</code>, <code>absolute</code>, <code>fixed</code>, o <code>sticky</code>. (En otras palabras, cualquiera excepto <code>static</code>).</li>
 <li>Un <strong>elemento posicionado relativamente</strong> es un elemento cuyo valor <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> de <code>position</code> es <code>relative</code>. Las propiedades {{Cssxref("top")}} y {{Cssxref("bottom")}} especifican el desplazamiento vertical desde su posición original; las propiedades {{Cssxref("left")}} y {{Cssxref("right")}} especifican su desplazamiento horizontal.</li>
 <li>Un <strong>elemento posicionado absolutamente</strong> es un elemento cuyo valor <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> de  <code>position</code> es <code>absolute</code> o <code>fixed</code>. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y  {{Cssxref("left")}} especifican el desplazamiento desde los bordes del <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block"> bloque contenedor</a> del elemento. (El bloque contenedor es el ancestro relativo al cual el elemento está posicionado). Si el elemento tiene márgenes, se agregarán al desplazamiento. el elemento establece un nuevo contexto de formato de bloque para su contenido</li>
 <li>Un <strong>elemento posicionado fijamente </strong>es un elemento cuyo valor de  <code>position </code><a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> es <code>sticky</code>. Es tratado como un elemento posicionado relativamente hasta que su <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> cruza un límite establecido (como por ejemplo dando a {{Cssxref("top")}} cualquier valor distinto de auto), dentro de su flujo principal (o el contenedor dentro del cual se mueve), desde el cual es tratado como "fijo" hasta que alcance el borde opuesto de su <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a>.</li>
</ul>

<p>La mayoría de las veces, los elementos absolutamente posicionados que tienen su {{Cssxref("height")}} y {{Cssxref("width")}} establecidos en <code>auto</code> son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-<a href="/en-US/docs/Web/CSS/Replaced_element">replaced</a> y absolutamente posicionados se pueden crear para llenar el espacio vertical disponible, especificando tanto {{Cssxref("top")}} como {{Cssxref("bottom")}}, y dejando {{Cssxref("height")}} sin especificar (es decir, <code>auto</code>). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto {{Cssxref("left")}} como {{Cssxref("right")}}, y dando a {{Cssxref("width")}} el valor de <code>auto</code>.</p>

<p>A excepción del caso anteriormente descrito (de elementos posicionados absolutamente rellenando el espacio disponible):</p>

<ul>
 <li>Si ambos, <code>top</code> y <code>bottom</code> están especificados (técnicamente, no <code>auto</code>), <code>top</code> gana.</li>
 <li>Si ambos, <code>left</code> y <code>right</code>, están especificados,  <code>left</code> gana cuando {{Cssref("direction")}} es <code>ltr</code> (Inglés, japonés horizontal, etc.) y <code>right</code> gana cuando {{Cssxref("direction")}} es <code>rtl</code> (Persa, árabe, hebreo, etc.).</li>
</ul>

<h2 id="Sintaxis">Sintaxis</h2>

<p>La propiedad <code>position</code> es especificada como una palabra única elegida de la siguiente lista de valores.</p>

<h3 id="Valores">Valores</h3>

<dl>
 <dt id="static"><code>static</code></dt>
 <dd>El elemento es posicionado de acuerdo al flujo normal del documento. Las propiedades {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} <em>no tienen efecto</em>. Este es el valor por defecto.</dd>
 <dt id="relative"><code>relative</code></dt>
 <dd>El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado <em>con relación a sí mismo</em>, con base en los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. El desplazamiento no afecta la posición de ningún otro elemento; por lo que, el espacio que se le da al elemento en el esquema de la página es el mismo como si la posición fuera <code>static</code>. Este valor crea un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>, donde el valor de <code>z-index</code> no es <code>auto</code>. El efecto que tiene <code>relative</code> sobre los elementos <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, y <code>table-caption</code> no está definido.</dd>
 <dt id="absolute"><code>absolute</code></dt>
 <dd>El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado relativo a su ancestro posicionado más cercano, si lo hay; de lo contrario, se ubica relativo al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial. Su posición final está determinada por los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>.</dd>
 <dd>Este valor crea un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a> cuando el valor de <code>z-index</code> no es <code>auto</code>. Elementos absolutamente posicionados pueden tener margen, y no colapsan con ningún otro margen.</dd>
 <dt id="fixed"><code>fixed</code></dt>
 <dd>El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado con relación al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial establecido por el {{glossary("viewport")}}, excepto cuando uno de sus ancestros tiene una propiedad <code>transform</code>, <code>perspective</code>, o <code>filter</code> establecida en algo que no sea <code>none</code> (ver <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), en cuyo caso ese ancestro se comporta como el bloque contenedor. (Notar que hay inconsistencias del navegador con <code>perspective</code> y <code>filter</code> contribuyendo a la formación del bloque contenedor.) Su posición final es determinada por los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>.</dd>
 <dd>Estos valores siempre crean un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>. En documentos impresos, el elemento se coloca en la misma posición en <em>cada página</em>.</dd>
 <dt id="sticky"><code>sticky</code> {{experimental_inline}}</dt>
 <dd>El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado <em>con relación a su ancestro que se desplace más cercano y su </em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> (ancestro en nivel de bloque más cercano) incluyendo elementos relacionados a tablas, basados en los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>. El desplazamiento no afecta la posición de ningún otro elmento.</dd>
 <dd>Estos valores siempre crean un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>. Nótese que un elemento sticky se "adhiere" a su ancestro más cercano que tiene un "mecanismo de desplazamiento" (creado cuando el <code>overflow</code> es <code>hidden</code>, <code>scroll</code>, <code>auto</code>, o bien <code>overlay</code>), aún si ese ancestro no es el ancestro con desplazamiento más cercano. Esto inhibe efectivamente el comportamiento "sticky" (ver el <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue en W3C CSSWG</a>).</dd>
</dl>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Examples">Examples</h2>

<h3 id="Relative_positioning" name="Relative_positioning">Posicionamiento relativo</h3>

<p>Elementos posicionados relativamente son desplazados una cantidad dada de su posición normal en el documento, pero sin que su desplazamiento afecte a otros elementos. En el ejemplo siguiente, nótese cómo los demás elementos se ubican como si "Two" estuviera ocupando el lugar de su ubicación normal.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
&lt;div class="box" id="four"&gt;Four&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
</pre>

<p>{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}</p>

<h3 id="Absolute_positioning" name="Absolute_positioning">Posicionamiento absoluto</h3>

<p>Los elementos posicionados relativamente se mantienen en el flujo normal del documento. Por el contrario, un elemento posicionado absolutamente es removido del flujoñ de esta manera, los demás elementos se posicionan como si el mismo no existiera. El elemento posicionado absolutamente se posiciona relativamente a su<em>ancestro posicionado más cercano</em> (es decir, el ancestro más cercano que no es <code>static</code>). Si no hay ningún ancestro posicionado se ubica relativo al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial. En el ejemplo siguiente, la caja "Two" no tiene un ancestro posicionado, por lo tanto se posiciona relativo al <code>&lt;body&gt;</code> del documento.</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
&lt;div class="box" id="four"&gt;Four&lt;/div&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: blue;
}</pre>

<p>{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}</p>

<h3 id="Fixed_positioning" name="Fixed_positioning">Posicionamiento fijo</h3>

<p>El posicionamiento fijo es similar al posicionamiento absoluto, con la excepción de que el bloque contenedor del elemento es el <em>viewport</em>. Esto puede usarse para crear un elemento flotante que se mantiene en la misma posición independientemente del desplazamiento. En el ejemplo siguiente, la caja "One" está fijada a 80 pixels del límite superior de la página y 10 pixels a la izquierda. Aún luego de desplazarse, se mantiene en el mismo lugar relativo al viewport.</p>

<pre class="brush: html notranslate">&lt;div class="outer"&gt;
  &lt;p&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  &lt;/p&gt;
  &lt;p&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  &lt;/p&gt;
  &lt;div class="box" id="one"&gt;One&lt;/div&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: css notranslate">.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}
</pre>

<p>{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}</p>

<h3 id="Sticky_positioning" name="Sticky_positioning">Posicionamiento sticky</h3>

<p>El posicionamiento sticky puede considerarse un híbrido de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto se trata como fijo hasta que alcanza el límite de su padre. Por ejemplo...</p>

<pre class="brush: css notranslate">#one { position: sticky; top: 10px; }</pre>

<p>...posicionaría el elemento con id <em>uno </em>relativamente hasta que el viewport sea desplazado de manera tal que el elemento esté a menos de 10 píxeles del límite superior. Más allá de ese umbral, el elemento sería fijado a 10 píxeles del límite superior.</p>

<p>Un uso común para el posicionamiento sticky es para los encabezados en una lista alfabética. El encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A" hasta que se hayan desplazado más allá de la pantalla. En vez de deslizarse fuera de la pantalla como el resto del contenido, el encabezado "B" se mantendrá fijado al límite superior del viewport hasta que todos los ítems "B" se hayan desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado "C", y así sucesivamente.  Se debe especificar un umbral con al menos uno de <code style="">top</code><span style="">, </span><code style="">right</code><span style="">, </span><code style="">bottom</code><span style="">, or </span><code style="">left</code><span style=""> para que el posicionamiento sticky se comporte de forma esperada. Caso contrario, será indistinguible del posicionamiento relativo.</span></p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html notranslate">&lt;dl&gt;
  &lt;div&gt;
    &lt;dt&gt;A&lt;/dt&gt;
    &lt;dd&gt;Andrew W.K.&lt;/dd&gt;
    &lt;dd&gt;Apparat&lt;/dd&gt;
    &lt;dd&gt;Arcade Fire&lt;/dd&gt;
    &lt;dd&gt;At The Drive-In&lt;/dd&gt;
    &lt;dd&gt;Aziz Ansari&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;C&lt;/dt&gt;
    &lt;dd&gt;Chromeo&lt;/dd&gt;
    &lt;dd&gt;Common&lt;/dd&gt;
    &lt;dd&gt;Converge&lt;/dd&gt;
    &lt;dd&gt;Crystal Castles&lt;/dd&gt;
    &lt;dd&gt;Cursive&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;E&lt;/dt&gt;
    &lt;dd&gt;Explosions In The Sky&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;T&lt;/dt&gt;
    &lt;dd&gt;Ted Leo &amp;amp; The Pharmacists&lt;/dd&gt;
    &lt;dd&gt;T-Pain&lt;/dd&gt;
    &lt;dd&gt;Thrice&lt;/dd&gt;
    &lt;dd&gt;TV On The Radio&lt;/dd&gt;
    &lt;dd&gt;Two Gallants&lt;/dd&gt;
  &lt;/div&gt;
&lt;/dl&gt;
</pre>

<h4 id="CSS_4">CSS</h4>

<pre class="brush: css notranslate">* {
  box-sizing: border-box;
}

dl &gt; div {
  background: #FFF;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}
</pre>

<p>{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}</p>

<ul>
</ul>

<h2 id="Consideraciones_de_accesibilidad">Consideraciones de accesibilidad</h2>

<p>Asegurarse de que los elementos posicionados con valor <code>absolute</code> o <code>fixed</code> no oscurezcan el resto del contenido cuando la página sea ampliada para aumentar el tamaño del texto.</p>

<ul>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN entendiendo el WCAG, explicaciones de los lineamientos 1.4.</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Presentación visual: Entendiendo SC 1.4.8 | Entendiendo WCAG 2.0</a></li>
</ul>

<h3 id="Performance_y_accesibilidad">Performance y accesibilidad</h3>

<p>Los elementos que se desplazan que contienen contenido <code>fixed</code> o <code>sticky</code> content pueden ocasionar problemas de performance y accesibilidad. Mientras un usuario desplaza la página, el navegador debe realizar repaint del contenido sticky o fijo en una nueva locación. Dependiendo del contenido que precisa ser repainted, la performance del navegador y la velocidad de procesamiento del dispositivo, el navegador podría no ser capaz de realizar el repaint a 60 <abbr title="frames per second">fps</abbr>, ocasionando problemas de accesibilidad para personas con sensibilidades y desprolijidad para todos. Una solución es agregar {{cssxref("will-change", "will-change: transform")}} a los elementos posicionados para renderizar el elemento en su propia capa, mejorando la velocidad del repaint y por lo tanto mejorando performance y accesibilidad.</p>

<h2 id="Specifications" name="Specifications">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Status</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
   <td>{{Spec2('CSS3 Positioning')}}</td>
   <td>Añade valor de la propiedad <code>sticky</code>.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad</h2>

<div class="hidden">La tabla de compatibilidad en esta página es generada por una data estructurada. Si deseas contribuir a la data, por favor entra a <a href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div>

<p>{{Compat("css.properties.position")}}</p>