A propriedadeposition, encontrada noCSS, define como um elemento pode ser posicionado (renderizado) no documento (página). Essa propriedade (position) pode ser acompanhada de outras, tais como,top,right,bottom, andleft, que determinam como ficará a localização final do objeto, permitindo seu deslocamento, como será apresentado adiante.

Experimente

position: static;

position: relative;top: 40px;left: 40px;

position: absolute;top: 40px;left: 40px;

position: sticky;top: 20px;

<section>  <div>    <p>      In this demo you can control the <code>position</code> property for the      yellow box.    </p>    <div></div>    <div></div>    <div></div>    <p>      To see the effect of <code>sticky</code> positioning, select the      <code>position: sticky</code> option and scroll this container.    </p>    <p>      The element will scroll along with its container, until it is at the top      of the container (or reaches the offset specified in <code>top</code>),      and will then stop scrolling, so it stays visible.    </p>    <p>      The rest of this text is only supplied to make sure the container      overflows, so as to enable you to scroll it and see the effect.    </p>    <hr />    <p>      Far out in the uncharted backwaters of the unfashionable end of the      western spiral arm of the Galaxy lies a small unregarded yellow sun.      Orbiting this at a distance of roughly ninety-two million miles is an      utterly insignificant little blue green planet whose ape-descended life      forms are so amazingly primitive that they still think digital watches are      a pretty neat idea.    </p>  </div></section>

section {  align-items: flex-start;  overflow: auto;}.box {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;  float: left;  width: 65px;  height: 65px;}.box + .box {  margin-left: 10px;}.clear {  clear: both;  padding-top: 1em;}#example-element-container {  position: relative;  text-align: left;}#example-element {  background-color: yellow;  border: 3px solid red;  z-index: 1;}

Tipos de posicionamentos

• Umelemento posicionado é um elemento cujo valor de sua posição pode sercomputado (calculado) comorelative,absolute,fixed, orsticky. ( Em outras palavras, são todos esses, com exceção dostatic, sendo estático o valor como padrão do elemento.)
• Um elemento denominado composicionamento relativo, ourelatively positioned element, é um elemento cuja função écalculada ao ser definida aposition como valorrelative. Com isso, a propriedadetop ebottom determinam o deslocamento ou projeção vertical a posição padrão do elemento que estava definida porstatic; Não sendo outro, oleft e oright, por sua vez, determinam o deslocamento horizontal.
• Um elemento denominado composicionamento absoluto, ouabsolutely positioned element, é um elemento determinado e calculado ao atribuir aoposition o valorabsolute oufixed. Comtop,right,bottom, andleft é possível especificar o deslocamento das laterais (bordas) dos blocos que contêm (containing block) 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 novocontexto de formatação do bloco (BFC) para seus conteúdos.
• Um elemento denominado composicionamento adesivo ( ! ), oustickily positioned element, é um elemento determinado e calculado ao atribuir aoposition como valorsticky. Sendo tratado como um posicionamento relativo até que ultrapasse (atinja) os limites dobloco no qual está contido. (Se assemelha a configurar a propriedadetop com um valor diferente de automá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 dobloco no qual esteja contido.

Maior parte do tempo, umelemento de posicionamento absoluto que temheight ewidth configurados comoauto são dimensionados de acordo com seu conteúdo interno. However, non-replaced, absolutely positioned elements can be made to fill the available vertical space by specifying bothtop andbottom and leavingheight unspecified (that is,auto). They can likewise be made to fill the available horizontal space by specifying bothleft andright and leavingwidth asauto.

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

• Se ambostop ebottom são definidos (tecnicamento não sendoauto),top prevalece.
• Se ambosleft eright são definidos,left prevalece quandodirection éltr (Direção da escrita Portuguesa, Japonês na horizontal, etc.) eright prevalece quandodirection for configuradortl ( Padrão de escrita em idiomas como Persa, Arabe, Hebraico, etc.).

Sintaxe

A propriedadeposition é definida com apenas uma palavra-chave da lista abaixo.

Valores

static

O elemento é posicionado de acordo com o fluxo normal do documento. Otop,right,bottom,left, ez-index propriedadesnão têm efeito.. Este é o valor padrão.

relative

O elemento é posicionado de acordo com o fluxo normal do documento e, em seguida, deslocadoem relação a si mesmo com base nos valores detop,right,bottom, eleft. O deslocamento não afeta a posição de nenhum outro elemento; assim, o espaço dado para o elemento no layout da página é o mesmo que se a posição fossestatic.

Este valor cria um novostacking context (contexto de empilhamento) quando o valor dez-index não forauto. Seu efeito emtable-*-group,table-row,table-column,table-cell e os elementostable-caption são indefinidos.

absolute

O elemento é removido do fluxo normal de documentos e nenhum espaço é criado para o elemento no layout da página. Ele é posicionado em relação ao seu ancestral posicionado mais próximo, se houver; caso contrário, ele é colocado em relação ao inicialcontaining block. Sua posição final é determinada pelos valores detop,right,bottom, eleft.

Este valor cria um novostacking context quando o valor dez-index não éauto. As margens das caixas posicionadas absolutamente nãocollapse com outras margens.

fixed

O elemento é removido do fluxo normal de documentos e nenhum espaço é criado para o elemento no layout da página. Ele está posicionado em relação ao inicialcontaining block estabelecido peloviewport, exceto quando um de seus ancestrais tiver uma propriedadetransform,perspective oufilter definida como algo diferente denone (see theCSS Transforms Spec), nesse caso, esse ancestral se comporta como o bloco que o contém. (Observe que há inconsistências no navegador comperspective efilter contribuindo para conter a formação do bloco.) Sua posição final é determinada pelos valores detop,right,bottom eleft.

Este valor sempre cria um novostacking context. Em documentos impressos, o elemento é colocado na mesma posição emtodas as páginas.

sticky

O elemento é posicionado de acordo com o fluxo normal do documento e, em seguida, deslocado em relação aoancestral de rolagem mais próximo econtaining block (ancestral de nível de bloco mais próximo), incluindo elementos relacionados à tabela, com base nos valores detop,right,bottom eleft. O deslocamento não afeta a posição de nenhum outro elemento.

Este valor sempre cria um novostacking context. Observe que um elemento sticky "gruda" em seu ancestral mais próximo que possui um "mecanismo de rolagem" (criado quandooverflow éhidden,scroll,auto ouoverlay), mesmo que esse ancestral não seja o ancestral de rolagem mais próximo. Isso inibe efetivamente qualquer comportamento "pegajoso" (see theGithub issue on W3C CSSWG).

Sintáxe formal

position =
static|
relative|
absolute|
sticky|
fixed|
<running()>

<running()> =
running(<custom-ident>)

Exemplos

Posicionamento relativo

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.

HTML

<div>One</div><div>Two</div><div>Three</div><div>Four</div>

CSS

.box {  display: inline-block;  width: 100px;  height: 100px;  background: red;  color: white;}#two {  position: relative;  top: 20px;  left: 20px;  background: blue;}

Posicionamento absoluto

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 itsnearest positioned ancestor (i.e., the nearest ancestor that is notstatic). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block — see also theW3C definition), which is the containing block of the document's root element.

A simple example follows:

<h1>Absolute positioning</h1><p>  I am a basic block level element. My adjacent block level elements sit on new  lines below me.</p><p>  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.</p><p>  We are separated by our margins. Because of margin collapsing, we are  separated by the width of one of our margins, not both.</p><p>  inline elements <span>like this one</span> and <span>this one</span> sit on  the same line as one another, and adjacent text nodes, if there is space on  the same line. Overflowing inline elements  <span>wrap onto a new line if possible — like this one containing text</span>,  or just go on to a new line if not, much like this image will do:  <img src="long.jpg" /></p>

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

Posicionamento fixo

Fixed positioning is similar to absolute positioning, with the exception that the element'scontaining block is the initial containing block established by theviewport, unless any ancestor hastransform,perspective, orfilter property set to something other thannone (seeCSS Transforms Spec), which then causes that ancestor to take the place of the elementscontaining block. 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.

HTML

<div>  <p>    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.  </p>  <p>    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.  </p>  <div>One</div></div>

CSS

.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;}

Posicionamento Adesivo

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...

#one {  position: sticky;  top: 10px;}

...would position the element with idone 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.

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.

You must specify a threshold with at least one oftop,right,bottom, orleft for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.

HTML

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

CSS

* {  box-sizing: border-box;}dl > 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;}

Accessibility concerns

Ensure that elements positioned with anabsolute orfixed value do not obscure other content when the page is zoomed to increase text size.

• MDN Understanding WCAG, Guideline 1.4 explanations
• Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0

Performance & Accessibility

Scrolling elements containingfixed orsticky 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 fps, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to addwill-change: transform to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.

Especificações

Compatibilidade do navegador