path: root/files/pt-br/web/css/position/index.html

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

<div>A propriedade <strong><code>position</code></strong>, encontrada no <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>, define como um elemento pode ser posicionado (renderizado) no documento (página). Essa propriedade (<strong><code>position</code></strong>) pode ser acompanhada de outras, tais como, {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, and {{Cssxref("left")}}, que determinam como ficará a localização final do objeto, permitindo seu deslocamento, como será apresentado adiante.</div>

<div></div>

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



<h3 id="Tipos_de_posicionamentos">Tipos de posicionamentos</h3>

<ul>
 <li>Um <strong>elemento posicionado</strong> é um elemento cujo valor de sua posição pode ser <a href="/en-US/docs/CSS/computed_value">computado (calculado)</a> como <code>relative</code>, <code>absolute</code>, <code>fixed</code>, or <code>sticky</code>. ( Em outras palavras, são todos esses, com excessão do <code>static</code>, sendo estático o valor como padrão do elemento.)</li>
 <li>Um elemento denominado com<strong> posicionamento relativo</strong>, ou <strong>relatively positioned element</strong>, é um elemento cuja função é <a href="/en-US/docs/CSS/computed_value">calculada</a> ao ser definida a <code>position</code> como valor <code>relative</code>. Com isso, a propriedade {{Cssxref("top")}} e {{Cssxref("bottom")}} determinam o deslocamento ou projeção vertical a posição padrão do elemento que estava definida por <code>static</code>; Não sendo outro, o {{Cssxref("left")}} e o {{Cssxref("right")}}, por sua vez, determinam o deslocamento horizontal.</li>
 <li>Um elemento denominado com <strong>posicionamento absoluto</strong>, ou <strong>absolutely positioned element</strong>,  é um elemento determinado e calculado ao atribuir ao <code>position</code> o valor <code>absolute</code> ou <code>fixed</code>. Com {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, and {{Cssxref("left")}} é possível especificar o deslocamento das laterais (bordas) dos blocos que contém (<a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a>) os elementos.  (O containing block, ou blocos que envolvem um elemento é definido como um antecessor relativo ao qual o elemento está posicionado, acomplado ou englobado.  Se por ventura o elemento tiver definido margens (margin), ele são adicionados ao deslocamento (offset). O elemento estabelecerá um novo <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formatação do bloco</a> (BFC) para seus conteúdos.</li>
 <li>Um elemento denominado com <strong>posicionamento adesivo</strong> ( ! ), ou <strong>stickily positioned element</strong>, é um elemento determinado e calculado ao atribuir ao <code>position</code> como valor <code>sticky</code>. Sendo tratado como um posicionamento relativo até que ultrapasse (atinja) os limites do <a href="/pt-BR/docs/docs/Web/CSS/Containing_Block">bloco no qual está contido</a>.  (Se assemelha a configurar a propriedade {{Cssxref("top")}} com um valor diferente de automatático (auto)) Dentro do seu fluxo principal (fluxo raiz, ou o contêiner no qual ele desloca-se),  No momento que há o deslocamento da página o elemento é tratado como "preso" ou "stuck" até encontrar-se com as paredes opostas do <a href="/pt-BR/docs/docs/Web/CSS/Containing_Block">bloco no qual esteja contido</a>.</li>
</ul>

<p>Maior parte do tempo, um <strong>elemento de posicionamento absoluto</strong> que tem {{Cssxref("height")}} e {{Cssxref("width")}} configurados como <code>auto</code> são dimensionados de acordo com seu conteúdo interno. However, non-<a href="/en-US/docs/Web/CSS/Replaced_element">replaced</a>, absolutely positioned elements can be made to fill the available vertical space by specifying both {{Cssxref("top")}} and {{Cssxref("bottom")}} and leaving {{Cssxref("height")}} unspecified (that is, <code>auto</code>). They can likewise be made to fill the available horizontal space by specifying both {{Cssxref("left")}} and {{Cssxref("right")}} and leaving {{Cssxref("width")}} as <code>auto</code>.</p>

<p>Exceto para esses casos descritos abaixo (para elementos de posicionamento absoluto que preenchem o espaço disponível):</p>

<ul>
 <li>Se ambos <code>top</code> e <code>bottom</code> são definidos (tecnicamento não sendo <code>auto</code>), <code>top</code> prevalece.</li>
 <li>Se ambos <code>left</code> e <code>right</code> são definidos, <code>left</code> prevalece quando {{Cssxref("direction")}} é <code>ltr</code> (Direção da escrita Portuguesa, Japonês na horizontal, etc.) e <code>right</code> prevalece quando {{Cssxref("direction")}} for configurado <code>rtl</code> ( Padrão de escrita em idiomas como Persa, Arabe, Hebraico, etc.).</li>
</ul>

<h2 id="Sintáxe">Sintáxe</h2>

<p>A propriedade <code>position</code> é definida com apenas uma palavra-chave da lista abaixo.</p>

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

<dl>
 <dt id="static"><code>static</code></dt>
 <dd>The element is positioned according to the normal flow of the document. The {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} properties have <em>no effect</em>. This is the default value.</dd>
 <dt id="relative"><code>relative</code></dt>
 <dd>The element is positioned according to the normal flow of the document, and then offset <em>relative to itself</em> based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were <code>static</code>.</dd>
 <dd>This value creates a new <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. Its effect on <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, and <code>table-caption</code> elements is undefined.</dd>
 <dt id="absolute"><code>absolute</code></dt>
 <dd>The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial <a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a>. Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>.</dd>
 <dd>This value creates a new <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. The margins of absolutely positioned boxes do not <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">collapse</a> with other margins.</dd>
 <dt id="fixed"><code>fixed</code></dt>
 <dd>The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial <a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a> established by the {{glossary("viewport")}}, except when one of its ancestors has a <code>transform</code>, <code>perspective</code>, or <code>filter</code> property set to something other than <code>none</code> (see the <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with <code>perspective</code> and <code>filter</code> contributing to containing block formation.) Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>.</dd>
 <dd>This value always creates a new <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. In printed documents, the element is placed in the same position on <em>every page</em>.</dd>
 <dt id="sticky"><code>sticky</code></dt>
 <dd>The element is positioned according to the normal flow of the document, and then offset relative to its<em> nearest scrolling ancestor</em> and <a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a> (nearest block-level ancestor), including table-related elements, based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements.</dd>
 <dd>This value always creates a new <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when <code>overflow</code> is <code>hidden</code>, <code>scroll</code>, <code>auto</code>, or <code>overlay</code>), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior (see the <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>).</dd>
</dl>

<h3 id="Sintáxe_formal">Sintáxe formal</h3>

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

<h2 id="Exemplos">Exemplos</h2>

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

<p>Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.</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">Posicionamento absoluto</h3>

<p>Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its <em>nearest positioned ancestor</em> (i.e., the nearest ancestor that is not <code>static</code>). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block — see also the <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">W3C definition</a>), which is the containing block of the document's root element.</p>

<p>A simple example follows:</p>

<pre class="brush: html notranslate">&lt;h1&gt;Absolute positioning&lt;/h1&gt;

&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;

&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;

&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;

&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>

<pre class="brush: css notranslate">body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}</pre>

<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p>

<h3 id="Fixed_positioning" name="Fixed_positioning">Posicionamento fixo</h3>

<p>Fixed positioning is similar to absolute positioning, with the exception that the element's <a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a> is the initial containing block established by the <em>viewport</em>, unless any ancestor has <code>transform</code>, <code>perspective</code>, or <code>filter</code> property set to something other than <code>none</code> (see <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), which then causes that ancestor to take the place of the elements <a href="/en-US/docs/Web/CSS/Containing_Block">containing block</a>. This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.</p>

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

<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_2">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">Posicionamento Adesivo</h3>

<p>Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For instance...</p>

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

<p>...would position the element with id <em>one</em> relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.</p>

<p>A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.</p>

<p>You must specify a threshold with at least one of <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.</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_3">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>

<h2 id="Accessibility_concerns">Accessibility concerns</h2>

<p>Ensure that elements positioned with an <code>absolute</code> or <code>fixed</code> value do not obscure other content when the page is zoomed to increase text size.</p>

<ul>
 <li><a href="/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 Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</a></li>
</ul>

<h3 id="Performance_Accessibility">Performance &amp; Accessibility</h3>

<p>Scrolling elements containing <code>fixed</code> or <code>sticky</code> content can cause performance and accessibility issues. As a user scrolls, the browser must repaint the sticky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60 <abbr title="frames per second">fps</abbr>, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to add {{cssxref("will-change", "will-change: transform")}} to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.</p>

<h2 id="Specifications" name="Specifications"><span class="tlid-translation translation" lang="pt"><span title="">Especificações</span></span></h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</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>Adds <code>sticky</code> property value.</td>
  </tr>
 </tbody>
</table>

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

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</h2>



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