2 относительных позиционных деления?

Question

У меня есть контейнер div с относительным позиционированием, затем другой div внутри, который также имеет относительное позиционирование:

<div class="first">
  <div class="second">
    <img src="img.jpg" />
  </div>
</div>

Я бы хотел, чтобы изображение с абсолютным позиционированием было относительно "второго" div, а непервый".Но мне нужно, чтобы они оба имели относительное расположение, как мне указать, чтобы изображение было относительно "второго" div?

Answer 1

В иерархии страниц изображение будет относительно .second;тем не менее, вы должны определить родителя, который будет относительно позиционирован для ухода за ребенком .

см.позиционирование /

.second { position:relative; }
.second img { position:absolute; top:0; left: 0 }

Answer 2

Относительно второго <div> автоматически в соответствии со стандартами CSS, поскольку он вложен во второй <div> и этот div расположен. Вот цитата из стандарта CSS2 :

Содержащий блок для позиционированного бокса устанавливается ближайшим позиционированным предком

Таким образом, вы рассчитываете вверх в дереве DOM, то есть от ближайшего предка к корню документа, и останавливаетесь у первого позиционированного предка (а если его нет, то это ближайший контейнер, но это не относится Вот). В этом случае это будет div.second, как вы хотите.

Answer 3

.second img{ position:absolute; top:0; left:0; }

Позиционирование является лишь примером; Вы можете изменить его в соответствии со своими потребностями.