CSS: как иметь позицию: абсолютный div внутри позиции: относительный div не обрезается переполнением: скрыто на контейнере

У меня есть 3 уровня div:

(Зеленым цветом внизу) Верхний уровень div с overflow: hidden. Это потому, что я хочу обрезать некоторый контент (не показанный здесь) внутри этого блока, если он превышает размер блока.
(Красным цветом внизу) Внутри этого у меня есть div с position: relative. Единственное использование для этого - для следующего уровня.
(Выделено синим цветом ниже) Наконец, div я вынимаю из потока position: absolute, но хочу, чтобы он располагался относительно красного div (не на странице).

Мне бы хотелось, чтобы синий прямоangularьник был извлечен из потока и вышел за пределы зеленого прямоangularьника, но должен располагаться относительно красного прямоangularьника, как показано ниже:

Однако с помощью приведенного ниже кода я получаю:

И удалив 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>

Ответ 1

Уловка, которая работает, состоит в том, чтобы расположить поле № 2 с position: absolute вместо position: relative. Обычно мы помещаем position: relative во внешний блок (здесь блок № 2), когда мы хотим, чтобы внутренний блок (здесь блок № 3) с position: absolute располагался относительно внешнего блока. Но помните: для блока № 3 нужно расположить относительно блока № 2, просто нужно расположить блок № 2. С этим изменением мы получаем:

А вот полный код с этим изменением:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

Я добавил больше подробностей об этом в Абсолютно позиционированный блок внутри блока с переполнением: авто или скрытый.

Ответ 2

Нет волшебного решения для отображения чего-либо вне скрытого контейнера переполнения.

Аналогичный эффект может быть достигнут за счет наличия абсолютного позиционного div, который соответствует размеру его родительского элемента, помещая его внутри вашего текущего относительного контейнера (div, который вы не хотите кликать, должен находиться вне этого div):

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

Имейте в виду, что если вам нужно только скопировать содержимое по оси x (что кажется вашим делом, поскольку вы только установили ширину div), вы можете использовать overflow-x: hidden.

Ответ 3

Я действительно не вижу способа сделать это как есть. Я думаю, вам может понадобиться удалить overflow:hidden из div # 1 и добавить еще один div в div # 1 (т.е. Как сиблинг для div # 2), чтобы сохранить неуказанный контент и добавить вместо него overflow:hidden. Я не думаю, что переполнение может быть (или должно быть возможным) чрезмерно.

Ответ 4

Если в внешнем div нет другого содержимого (зеленый квадрат), почему бы не включить этот контент в другой div, позвоните ему "content". Переполнения скрыты на этом новом внутреннем-div, но сохраняйте переполнение видимым в зеленой рамке.

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

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>