Notes

Search

SearchSearch

Propriedade position

Feb 28, 2024, 3 min read

Propriedade position

A propriedade position é fundamental para o posicionamento de elementos em uma página web. Ela determina como um elemento é posicionado em relação ao seu contêiner ou à viewport do navegador.

Valores da propriedade position

  1. static: Valor padrão. O elemento é posicionado conforme o fluxo normal do documento. Qualquer configuração de top, right, bottom ou left é ignorada.

  2. relative: O elemento é posicionado em relação à sua posição normal. As propriedades top, right, bottom ou left ajustam a posição em relação a esse ponto.

  3. absolute: O elemento é retirado do fluxo normal do documento e posicionado em relação ao seu ancestral mais próximo que não seja static. Se não houver tal contêiner, ele será posicionado em relação à viewport.

  4. fixed: O elemento é retirado do fluxo normal do documento e é posicionado em relação à viewport, permanecendo fixo mesmo quando a página é rolada.

  5. sticky: O elemento é tratado como relative dentro de seu contêiner até que ele atinja um determinado ponto durante o rolar da página, momento em que se comporta como fixed.

Exemplos

Posicionamento relativo

Posicionamento em relação à viewport:

.div-absoluta-viewport {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: lightblue;
  padding: 10px;
}
<div class="div-absoluta-viewport">
	Posicionamento em relação à viewport
</div>

Posicionamento em relação ao ancestral não static:

.pai-relativo {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
}
 
.filho-absoluto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: lightgreen;
  padding: 10px;
}
<div class="pai-relativo">
	<div class="filho-absoluto">
		Posicionamento em relação ao ancestral não 'static'
	</div>
</div>

Posicionamento absoluto

.div-absoluta {
  position: absolute;
  top: 50%; /* Posiciona a div a 50% da altura do seu contêiner pai */
  left: 0; /* Ajusta a div para o lado esquerdo do contêiner pai */
}

Posicionamento fixo

.menu-fixo {
  position: fixed;
  top: 0; /* Fixa o menu no topo da viewport, mesmo durante o scroll */
  width: 100%;
}

Posicionamento sticky

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: #f1f1f1;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 100;
}
 
li {
  float: left;
}
 
li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
li a:hover {
  background-color: #ddd;
}
<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#news">News</a></li>
	<li><a href="#contact">Contact</a></li>
</ul>
 
<div style="padding:20px;margin-top:30px;background-color:#f1f1f1;">
	<h3>Lorem, ipsum dolor.</h3>
	<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
	<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
	<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

Referências

Graph View

Backlinks