1
resposta

[Dúvida] position fixed

como faço pra usar o position fixed em algumas areas do grid? estou tentando mais nao esta ficando fixo no lugar certo.

1 resposta

Não sou expert em grid mas vamo lá

Você pode usar o posicionamento absoluto em conjunto com o posicionamento fixo para posicionar elementos em áreas específicas do seu grid.

Aqui está um exemplo de como você pode usar o posicionamento absoluto para posicionar um elemento no canto superior direito do seu grid e torná-lo fixo:

HTML

<div class="grid">
  <div class="fixed">
    <p>Este elemento é fixo</p>
  </div>
  <div class="content">
    <p>Este é o conteúdo do grid</p>
  </div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

.fixed {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 200px;
  height: 100px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.content {
  position: relative;
}

.content p {
  font-size: 24px;
  line-height: 1.5;
}

Neste exemplo, o elemento com a classe "fixed" é fixo e posicionado no canto superior direito do grid, enquanto o elemento com a classe "content" contém o conteúdo do grid.

O posicionamento absoluto é definido no elemento "fixed" usando as propriedades "position: fixed;", "top: 20px;", "right: 20px;" para posicioná-lo no canto superior direito do grid. Além disso, o elemento "fixed" tem um tamanho definido usando as propriedades "width: 200px;" e "height: 100px;".

Observe que o elemento "content" tem uma posição relativa definida. Isso é necessário para que o elemento "fixed" seja posicionado corretamente dentro do grid.

Se ainda houver dúvidas compartilhe seu código

Espero que isso ajude!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software