Lições
Iniciar
Começar a aprender
CodeGym /Cursos /Frontend SELF PT /Posicionamento Fixo

Posicionamento Fixo

Frontend SELF PT
Nível 22 , Lição 0
Disponível

6.1 position: sticky

O posicionamento fixo (position: sticky) no CSS combina propriedades de posicionamento relativo e fixo. Elementos com posicionamento fixo se comportam como posicionados relativamente até que atinjam um limite de rolagem, após o qual se tornam fixos.

Características do posicionamento fixo:

  • O elemento com position: sticky se comporta como posicionamento relativo até que atinja uma posição de rolagem definida
  • Após atingir o limite definido, o elemento torna-se fixo e permanece no lugar até que seja excedido outro limite de rolagem
  • O posicionamento fixo funciona apenas dentro do container pai. Quando o container pai ultrapassa os limites da área de visualização, o elemento fixo perde suas propriedades fixas

Sintaxe do posicionamento fixo

Para aplicar o posicionamento fixo são usadas propriedades position: sticky e coordenadas top, right, bottom ou left para definir o limite de rolagem. 

    
      .element {
        position: sticky;
        top: value;
        right: value;
        bottom: value;
        left: value;
      }

Onde:

  • top: distância do topo da janela do navegador até o topo do elemento
  • right: distância do lado direito da janela do navegador até o lado direito do elemento
  • bottom: distância do lado inferior da janela do navegador até o lado inferior do elemento
  • left: distância do lado esquerdo da janela do navegador até o lado esquerdo do elemento

Exemplo:

CSS 
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .header {
        position: sticky;
        top: 0;
        background-color: deepskyblue;
        padding: 10px;
        font-size: 24px;
        color: white;
      }

      .content {
        margin-top: 25px;
        background-color: lightgrey;
        padding: 20px;
      }
HTML 
    
      <div class="wrapper">
        <div class="header">Sticky Header</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>
Kotlin

Nesse exemplo, o cabeçalho com a classe .header permanecerá no lugar ao rolar a página, enquanto sua borda superior não atingir a borda superior da janela de visualização.

6.2 Vantagens e desvantagens do posicionamento fixo

Vantagens do posicionamento fixo

  1. Aprimoramento da interface do usuário:
    • Elementos fixos, como cabeçalhos, barras de navegação e barras laterais, melhoram a navegação e acessibilidade de conteúdo em páginas longas, permanecendo visíveis para o usuário
  2. Combinação dos benefícios de posicionamento relativo e fixo:
    • O posicionamento fixo permite que elementos permaneçam no fluxo do documento, mantendo sua posição relativa, até que o limite de rolagem seja atingido. Isso fornece um comportamento mais natural dos elementos
  3. Facilidade de implementação:
    • O posicionamento fixo é fácil de implementar com uma quantidade mínima de código e sem a necessidade de usar JavaScript

Desvantagens do posicionamento fixo

  1. Suporte limitado em navegadores antigos:
    • O posicionamento fixo é suportado pela maioria dos navegadores modernos, mas pode não funcionar em versões antigas, o que pode exigir soluções adicionais para compatibilidade
  2. Dependência dos containers pais:
    • O posicionamento fixo funciona apenas dentro do container pai. Se o container pai ultrapassa os limites da área de visualização, o elemento fixo perde suas propriedades fixas
  3. Problemas de sobreposição de conteúdo:
    • Elementos fixos podem sobrepor outros elementos na página, se sua altura ou largura não forem consideradas ao projetar o layout

6.3 Exemplos de uso do posicionamento fixo

1. Barra lateral fixa

Criar uma barra lateral fixa que permanece visível ao rolar o conteúdo.

CSS 
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .container {
        display: flex;
      }

      .sidebar {
        position: sticky;
        top: 0;
        left: 0;
        width: 200px;
        height: 100px;
        background-color: lightgreen;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 20px;
      }
HTML 
    
      <div class="wrapper">
        <div class="container">
          <div class="sidebar">Sticky Sidebar</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>
      </div>

Nesse exemplo, a barra lateral com a classe .sidebar permanecerá no lugar ao rolar o conteúdo.

2. Cabeçalho de tabela fixa

Criar um cabeçalho de tabela fixa que permanece visível ao rolar um grande volume de dados.

CSS 
    
        .wrapper {
          height: 200px;
          overflow: auto;
        }

        table {
          width: 100%;
          border-collapse: collapse;
        }

        th, td {
          padding: 10px;
          border: 1px solid #ddd;
        }

        th {
          position: sticky;
          top: 0;
          background-color: deepskyblue;
          color: white;
        }

        tbody {
          min-height: 300px;
          display: block;
        }

        tbody tr {
          display: table;
          width: 100%;
          table-layout: fixed;
        }
HTML 
    
      <div class="wrapper">
        <table>
          <thead>
            <tr>
              <th>Header</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
          </tbody>
        </table>
      </div>

Nesse exemplo, o cabeçalho da tabela permanecerá no lugar ao rolar o conteúdo da tabela.

1
Tarefa
Frontend SELF PT, nível 22, lição 0
Bloqueado
Cabeçalho Fixo
Cabeçalho Fixo
Abrir
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION