Como posso colocar a criança div no canto superior direito?

Question 1

eu tenho duas divs, eu quero colocar a criança em cima do pai superior, eu estava tentando, mas a criança div ficou preso do lado de fora, o que é errado?

.content {
  align-items: center;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 200px;
  min-height: 140px;
  min-width: 140px;
  border: 1px solid;
}

.topcorner {
  width: 42px;
  height: 42px;
  background: red;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

<div class="content">
  <div class="topcorner">top</div>
</div>

Question 2

Elemento pai precisa ter position: relative.

Adicionar position: relative para a classe pai .content para fazer a criança div dentro da div principal.

.content {
  align-items: center;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 200px;
  min-height: 140px;
  min-width: 140px;
  border: 1px solid;
  position: relative; //Add this line
}

.topcorner {
  width: 42px;
  height: 42px;
  background: red;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

<div class="content">
  <div class="topcorner">top</div>
</div>

Maniraj Murugan · Answer 1 · 2021-11-24T05:02:48

Elemento pai precisa ter position: relative.

Adicionar position: relative para a classe pai .content para fazer a criança div dentro da div principal.

.content {
  align-items: center;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 200px;
  min-height: 140px;
  min-width: 140px;
  border: 1px solid;
  position: relative; //Add this line
}

.topcorner {
  width: 42px;
  height: 42px;
  background: red;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

<div class="content">
  <div class="topcorner">top</div>
</div>

Como posso colocar a criança div no canto superior direito?

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria