8.1 Fluxo Normal
A posição dos elementos no CSS é fundamental para gerenciar como eles são dispostos e interagem numa página web. Ela define como os elementos são posicionados em relação a outros elementos e ao seu contêiner. Vamos ver como diferentes tipos de posicionamento afetam o fluxo dos elementos.
Fluxo do documento e posicionamento
Os elementos no fluxo normal do documento são dispostos um após o outro na ordem definida pelo HTML. Elementos
em bloco (por exemplo, <div>, <p>, <h1>) são dispostos verticalmente,
ocupando toda a largura do contêiner pai, enquanto elementos inline (por exemplo, <span>, <a>, <em>)
são dispostos horizontalmente, ocupando apenas o espaço necessário.
Exemplo:
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
<div class="block">Elemento em bloco</div>
<span class="inline">Elemento inline</span>
<span class="inline">Elemento inline</span>
8.2 Impacto do posicionamento no fluxo do documento
Diversos tipos de posicionamento podem alterar o fluxo padrão do documento. Vamos ver como isso acontece:
Posicionamento static
O posicionamento static é o valor padrão e não altera o fluxo normal do documento. Elementos
com position: static são dispostos na ordem definida pelo HTML.
Impacto no fluxo:
- Os elementos permanecem no fluxo normal
- Os elementos são dispostos um após o outro conforme sua ordem no HTML
Posicionamento relative
Elementos com position: relative permanecem no fluxo normal, mas podem ser deslocados em relação à sua
posição normal usando as propriedades top, right, bottom, left.
O deslocamento não afeta a posição de outros elementos.
Impacto no fluxo:
- Os elementos permanecem no fluxo normal
- O deslocamento do elemento não altera a posição dos elementos vizinhos
Posicionamento absolute
Elementos com position: absolute são removidos do fluxo normal do documento e colocados em relação ao ancestral
posicionado mais próximo. Se não houver tal ancestral, eles são posicionados em relação ao contêiner
inicial (geralmente é <html> ou <body>).
Impacto no fluxo:
- Os elementos são removidos do fluxo normal
- Posicionados em relação ao ancestral posicionado mais próximo
- Outros elementos agem como se esses elementos não existissem
Posicionamento fixed
Elementos com position: fixed são removidos do fluxo normal e posicionados em relação à janela do navegador.
Eles permanecem no mesmo lugar ao rolar a página.
Impacto no fluxo:
- Os elementos são removidos do fluxo normal
- Posicionados em relação à janela do navegador
- Permanecem no mesmo lugar ao rolar a página
- Outros elementos agem como se esses elementos não existissem
Posicionamento sticky
Elementos com position: sticky agem como se fossem posicionados relativamente até alcançarem
um certo ponto de rolagem, após o qual eles se tornam fixos.
Impacto no fluxo:
- Os elementos permanecem no fluxo normal até atingirem o ponto de rolagem
- Após atingir o ponto, o elemento se fixa e não afeta mais o fluxo normal
8.3 Exemplos visuais do impacto no fluxo
1. Exemplo com posicionamento fixo:
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="fixed">Elemento fixo</div>
<div class="content">Conteúdo rolável
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
2. Exemplo com posicionamento sticky:
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="sticky">Elemento sticky</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
GO TO FULL VERSION