Насколько я понимаю, если мы сделаем следующее:
<div id="Outer">
<div id="Inner"></div>
</div>
Внешняя позиция div относительна, а позиция внутреннего абсолютна, тогда мы сможем позиционировать внутреннюю позицию где угодновнутри "Outer div" (top / left / bottom и т. д.).
В своих попытках выяснить, как работает элемент position, я попытался настроить следующую сборку:
- Внешний div.
- Внутренний div внутри внешнего div.
- Внутренний div внутри внутреннего div.
Что я изменил, так это положениевнутренний div в абсолют, и даже если внутренний внутренний div был абсолютным, а его родительский элемент был абсолютным, я все еще был в состоянии позиционировать внутренний внутренний div.Я пытаюсь понять, как и почему я смог это сделать.Я имею в виду, родительский div (div number 2) => не является позицией: относительный;но это позиция: абсолютная;и все же, я успешно разместил внутренний внутренний элемент div так же, как вы позиционируете его, когда родитель находится в позиции: относительный.
Был бы рад услышать объяснение, почему эта конкретная установка сработала.Вот полный код:
<html>
<head>
<style type="text/css">
.OuterDiv {
padding: 0px;
margin: 0px auto 0px auto;
width: 500px;
height: 300px;
background-color: #E6E6E6;
overflow: hidden;
position: relative;
}
.InnerDiv {
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
background-color: #D3DEEF;
overflow: hidden;
}
.InnerInner {
position: absolute;
top: 20px;
right: 20px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="OuterDiv">
<div class="InnerDiv">
<div class="InnerInner">Inner Inner</div>
</div>
</div>
</body>
</html>