CSS A propriedade de posição
Position propriedade especifica o tipo de método de posicionamento usado
para um elemento.
Cinco valores de posição diferentes:
Ø static
Ø relative
Ø fixed
Ø absolute
Ø sticky
posição: estática;
Os elementos HTML são
posicionados estáticos por padrão.
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid
#73AD21;
}
</style>
</head>
<body>
<h2>posição: estática;</h2>
<p>Um elemento com posição: estático; não está
posicionado de forma especial; está sempre posicionado de acordo com o fluxo
normal da página:</p>
<div class="static">
Este elemento div tem position: static;
</div>
</body>
</html>
posição: relativa;
Um elemento com position:
relative;é posicionado em
relação à sua posição normal.
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>posição: relativa;</h2>
<p>Um elemento com posição: relativa; está
posicionado em relação à sua posição normal:</p>
<div class="relative">
Este elemento div tem posição: relativo;
</div>
</body>
</html>
posição: fixa;
Um elemento com position:
fixed;é posicionado em relação à
viewport, o que significa que ele sempre permanece no mesmo lugar, mesmo que a
página seja rolada.
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 6px solid
black;
}
</style>
</head>
<body>
<h2>posição: fixa;</h2>
<p>Um elemento com posição: fixo; está posicionado em
relação à janela de visualização, o que significa que sempre permanece no mesmo
lugar, mesmo que a página seja rolada:</p>
<div class="fixed">
Este elemento div tem posição: fixed;;
</div>
</body>
</html>
posição: absoluta;
Um elemento com position:
absolute;é posicionado em
relação ao ancestral posicionado mais próximo (em vez de posicionado em relação
à viewport, como fixo).
<!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: 6px solid
black;
}
</style>
</head>
<body>
<h2>posição: absoluta;</h2>
<p>Um elemento com posição: absoluta; é posicionado
em relação ao ancestral posicionado mais próximo (em vez de posicionado em
relação à viewport, como fixo):</p>
<div class="relative">Este elemento div tem
posição: relativo;
<div
class="absolute">Este elemento div tem posição:
absolute;</div>
</div>
</body>
</html>
posição: pegajoso;
Um elemento com position:
sticky;é posicionado com base na
posição de rolagem do usuário.
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position:
-webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color:
#cae8ca;
border: 4px solid
#4CAF50;
}
</style>
</head>
<body>
<p>Tente rolar dentro desse quadro para entender como
funciona o posicionamento fixo.</p>
<div class="sticky">Eu sou pegajoso! </div>
<div style="padding-bottom:2000px">
<p>Neste exemplo, o elemento aderente fica no topo da
página (topo: 0), quando você atinge sua posição de rolagem.</p>
<p>Role para cima para remover a aderência.</p>
<p>Algum texto para permitir a rolagem. Atqui causae
gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec
et. Inciderint efficiantur seu anúncio. Eum no molestiae
voluptatibus.</p>
<p>Algum texto para permitir a rolagem. Atqui causae
gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec
et. Inciderint efficiantur seu anúncio. Eum no molestiae
voluptatibus.</p>
</div>
</body>
</html>