Layout CSS - A propriedade position

Índice

A propriedade position especifica o tipo de método de posicionamento usado para um elemento (estático, relativo, fixo, absoluto ou pegajoso).

A propriedade da posição

A propriedade position especifica o tipo de método de posicionamento usado para um elemento.

Existem cinco valores de posição diferentes:

static
relative
fixed
absolute
sticky

Os elementos são então posicionados usando as teclas superior, inferior, esquerda e direita propriedades. No entanto, essas propriedades não funcionarão a menos que a posição a propriedade é definida primeiro. Eles também funcionam de forma diferente dependendo da posição valor.

Propriedade CSS `posição: estática;`

Os elementos HTML são posicionados estáticos por padrão.

Os elementos posicionados estáticos não são afetados pelas propriedades superior, inferior, esquerda e direita.

Um elemento com position: static; não está posicionado de nenhuma maneira especial; isso é sempre posicionado de acordo com o fluxo normal da página:

This <div> element has position: static;

Aqui está o CSS usado:

Exemplo

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>

</body>
</html>

Propriedade CSS `posição: relativa;`

Um elemento com position: relativo; é posicionado em relação à sua posição normal.

Definir as propriedades superior, direita, inferior e esquerda de um elemento relativamente posicionado causará deve ser ajustado fora de sua posição normal. Outros conteúdos não serão ajustados para caber em qualquer lacuna deixada pelo elemento.

This <div> element has position: relative;

Aqui está o CSS usado:

Exemplo

div.relative {
  position: relative;
  
left: 30px;
  border: 3px solid #73AD21;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

Propriedade CSS `posição: fixa;`

Um elemento com position: fixa; é posicionado em relação à janela de visualização, o que significa que sempre permanece no mesmo lugar mesmo se a página for rolada. O topo, As propriedades right, bottom e left são usadas para posicionar o elemento.

Um elemento fixo não deixa espaço na página onde normalmente estaria localizado.

Observe o elemento fixo no canto inferior direito da página. Aqui está o CSS usado:

Exemplo

div.fixed {
  position: fixed;
  
bottom: 0;
  right: 0;
  width: 
300px;
  border: 3px solid #73AD21;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

This <div> element has position: fixed;

Propriedade CSS `posição: absoluto;`

Um elemento com position: absoluto; é posicionado em relação ao ancestral posicionado mais próximo (em vez de posicionado em relação à janela de visualização, como fixo).

No entanto; se um elemento posicionado absoluto não tiver ancestrais posicionados, ele usa o corpo do documento e se move junto com a rolagem da página.

Observação: Elementos posicionados de forma absoluta são removidos do fluxo normal e podem se sobrepor a elementos.

Aqui está um exemplo simples:

This <div> element has position: relative;

This <div> element has position: absolute;

Aqui está o CSS usado:

Exemplo

div.relative {
  position: relative;
  
width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;	top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

Propriedade CSS `posição: sticky;`

Um elemento com position: sticky; é posicionado com base na posição de rolagem do usuário.

Um elemento fixo alterna entre relativo e fixo, dependendo da posição de rolagem. Ele é posicionado em relação até que uma determinada posição de deslocamento seja atingida na janela de visualização - então ele "gruda" no lugar (como position:fixed).

Observação: O Internet Explorer não suporta posicionamento fixo. Safari requer um -webkit- prefixo (veja exemplo abaixo). Você também deve especificar pelo menos um dos seguintes: top, right, inferior ou esquerda para posicionamento pegajoso para funcionar.

Neste exemplo, o elemento fixo adere ao topo da página (top: 0), quando você atinge sua posição de rolagem.

Exemplo

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: 
  sticky;
  top: 0;
  background-color: green;
  
  border: 2px solid #4CAF50;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. 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>Some text to enable scrolling.. 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>

</body>
</html>

Posicionando texto em uma imagem

Como posicionar o texto sobre uma imagem:

Exemplo

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Tente você mesmo:

Canto superior esquerdo →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>

Canto superior direito →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topright">Top Right</div>
</div>

</body>
</html>

Parte inferior esquerda →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomleft">Bottom Left</div>
</div>

</body>
</html>

Canto inferior direito →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomright">Bottom Right</div>
</div>

</body>
</html>

Centralizado →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>

Mais exemplos

Este exemplo demonstra como definir a forma de um elemento. O elemento é recortado nesta forma e exibido.

Definir a forma de um elemento

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>

<img src="w3css.gif" width="100" height="140">

</body>
</html>

Todas as propriedades de posicionamento CSS

bottom: Define a borda da margem inferior para uma caixa posicionada
clip: Recorta um elemento absolutamente posicionado
left: Define a borda da margem esquerda para uma caixa posicionada
position: Especifica o tipo de posicionamento de um elemento
right: Define a borda da margem direita para uma caixa posicionada
top: Define a borda da margem superior para uma caixa posicionada

Layout CSS - A propriedade position

Índice

A propriedade da posição

Propriedade CSS posição: estática;

Exemplo

Propriedade CSS posição: relativa;

Exemplo

Propriedade CSS posição: fixa;

Exemplo

Propriedade CSS posição: absoluto;

Exemplo

Propriedade CSS posição: sticky;

Exemplo

Posicionando texto em uma imagem

Exemplo

Mais exemplos

Todas as propriedades de posicionamento CSS

Propriedade CSS `posição: estática;`

Propriedade CSS `posição: relativa;`

Propriedade CSS `posição: fixa;`

Propriedade CSS `posição: absoluto;`

Propriedade CSS `posição: sticky;`