Вопросы Теги

CSS: Как иметь position:absolute отделение в position:relative отделении не быть обрезанным overflow:hidden на контейнере

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

  • (В зеленом ниже) верхний уровень div с overflow: hidden. Это вызвано тем, что я хочу некоторое содержание (не показанный здесь) в том поле к обрезанному, если оно превышает размер поля.
  • (В красном ниже) В этом я имею div с position: relative. Единственное использование для этого для следующего уровня.
  • (В синем ниже) Наконец a 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>
133
задан Paul Roub 6 September 2019 в 22:28
поделиться

4 ответа

Уловка, которая работает, заключается в размещении блока № 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>

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

48
ответ дан 24 November 2019 в 00:03
поделиться

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

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

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

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

5
ответ дан 24 November 2019 в 00:03
поделиться

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

0
ответ дан 24 November 2019 в 00:03
поделиться

Если во внешнем блоке div (зеленом поле) не отображается другой контент, почему бы не поместить его в другой блок, давайте назовем его «содержание» . Скрыть переполнение в этом новом внутреннем блоке 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>
0
ответ дан 24 November 2019 в 00:03
поделиться
Другие вопросы по тегам:

Похожие вопросы: