Блог

Главная - Вопросы по программированию - Применение относительного положения для элемента абсолютного положения.(в отношении ребенка div)

Применение относительного положения для элемента абсолютного положения.(в отношении ребенка div)

#html #css #position

Вопрос:

Я хочу div2 , чтобы это было relative div3 так, но, поскольку оно уже расположено absolute div1 (относительно), я не знаю, как этого добиться.

 .div1 {
  position: relative;
}

.div2 {
  position: absolute;
}

.div3 {
  position: absolute;
} 
 <div class="div1">
  <div class="div2">
    <div class="div3">
    </div>
  </div>
</div>

Комментарии:

1. div2 является родителем div3, так как вы хотите, чтобы он был относительно него (даже если мы представим, что в этом случае нет отмены).

2. Я также предполагаю, что вы неправильно подходите к более важной проблеме/плану. Можете ли вы дать более воспроизводимый пример того, чего вы пытаетесь достичь в конечном итоге?

Ответ №1:

Если, как я понимаю, вы хотите расположить div3 относительно div2, вы все равно можете это сделать, так как элемент с абсолютной позицией будет ссылаться на родителя с абсолютной позицией.

Элемент с положением: абсолютный; расположен относительно ближайшего расположенного предка (вместо положения относительно окна просмотра, как фиксированный).

Однако; если абсолютный позиционированный элемент не имеет позиционированных предков, он использует тело документа и перемещается вместе с прокруткой страницы.

Примечание: «Позиционированный» элемент-это элемент, положение которого является чем угодно, кроме статического.

Я включил фрагмент, чтобы визуализировать его.

 .div1{
height:150px;
border:1px solid black;
position:relative;
}
.div2{
height:80px;
position:absolute;
top:20px;
border:1px solid blue;
}
.div3{
position:absolute;
top:5px;
height:30px;
border:1px solid red;
}
div{
width:80px;
} 
 <div class="div1">
  <div class="div2">
    <div class="div3">
    </div>
  </div>
</div>
Метки: