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

StackOverflow https://stackoverflow.com/questions/2243245

  •  19-09-2019
  •  | 
  •  

Вопрос

у меня 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>

Это было полезно?

Решение

Уловка, которая работает, состоит в том, чтобы расположить поле № 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>

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

Другие советы

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

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

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

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

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

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

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

<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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top