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

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

127 голосов
/ 11 февраля 2010

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

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

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

Однако, с кодом ниже, я получаю:

И, удалив position: relative на красном поле, теперь синему ящику разрешено выходить из зеленого поля, но оно больше не располагается относительно красного поля:

Есть ли способ:

  • Держите overflow: hidden на зеленом поле.
  • Может ли синий прямоугольник расширяться за пределы зеленого прямоугольника и располагаться относительно красного прямоугольника?

Полный исходный код со встроенным CSS для тестирования: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>
        <br/><br/><br/>
        <div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px">
            <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>
    </body>
</html>

Ответы [ 4 ]

48 голосов
/ 11 февраля 2010

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

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

5 голосов
/ 11 февраля 2010

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

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

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

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

0 голосов
/ 11 февраля 2010

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

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

<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 голосов
/ 11 февраля 2010

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

...