У меня есть 3 уровня div
:
- (Зеленым цветом внизу) Верхний уровень
div
сoverflow: hidden
. Это потому, что я хочу, чтобы некоторый контент (не показанный здесь) внутри этого блока был обрезан, если он превышает размер блока. - (Красным внизу) Внутри у меня есть
div
сposition: relative
. Единственное использование для этого для следующего уровня. - (Выделено синим цветом ниже) Наконец-то
div
я вынимаю из потока,position: absolute
но хочу, чтобы он располагался относительно красногоdiv
(а не на странице).
Я бы хотел, чтобы синий прямоугольник был извлечен из потока и вышел за пределы зеленого прямоугольника, но должен располагаться относительно красного прямоугольника, как показано на рисунке:
Тем не менее, с кодом ниже, я получаю:
И, удалив position: relative
красный флажок, теперь синий прямоугольник может выйти из зеленого прямоугольника, но больше не позиционируется относительно красного прямоугольника:
Есть ли способ:
- Держите
overflow: hidden
на зеленой коробке. - Расширилось ли синее поле за зеленое поле и будет ли оно расположено относительно красного поля?
Полный источник:
#d1 {
overflow: hidden;
background: #efe;
padding: 5px;
width: 125px;
}
#d2 {
position: relative;
background: #fee;
padding: 2px;
width: 100px;
height: 100px;
}
#d3 {
position: absolute;
top: 10px;
background: #eef;
padding: 2px;
width: 75px;
height: 150px;
}
<br/><br/><br/>
<div id="d1" >
<div id="d2" >
<div id="d3"></div>
</div>
</div>
position: fixed
будет игнорировать overflow:hidden
любой содержащий элемент.