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

У меня есть относительно-расположенный div, который имеет overflow: auto set. Внутри этого, у меня есть div, который действует как своего рода раскрывающееся меню. Я хочу, чтобы раскрывающийся div расширялся за пределами родителя, когда ему это нужно, но оно обрезается, поскольку родительский элемент имеет overflow: auto.

Я понимаю, что это правильное поведение, но я не уверен, как добиться того, чего я хочу. Вот пример HTML, который иллюстрирует проблему:

<div style="position: relative; height: 100px; width: 100px; background: red; overflow: auto;">  

    <div style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background: green;">
    </div>

</div>

Ответ 1

Ваша проблема - это позиция: относительный родитель. Поскольку у вас есть это позиционирование на элементе, внутренний ящик ВСЕГДА останется в переполнении (позиция: абсолютная относительно ближайшего расположенного родителя).

Чтобы избежать этой проблемы, вы можете удалить "position: relative" из внешнего div и добавить обертку div с "position: relative;". Затем вам нужно добавить "top: 0;" объявление в ваш внутренний div (вы всегда должны иметь это, на самом деле).

Конечным результатом является один дополнительный div, и он выглядит так: (вы можете удалить стиль "z-index: -1", я просто добавил, что вы можете лучше видеть результат)

<div style="position:relative;border:1px solid blue;">
    <div style="height: 100px; width: 100px; background: red; overflow: auto;">
        if there is some really long content here, it will cause overflow, but the green box will not
        <div style="position:absolute; z-index:-1; left: 20px; top:0; height: 200px; width: 200px; background: green;">
        </div>
    </div>
</div>

Ответ 2

Я не уверен, как добиться того, чего хочу.

Я тоже - больше информации о том, что вы хотите?

Возможно, было бы неплохо отделить элемент от переполнения от элемента с "position: relative", особенно если это используется только для определения абсолютного внутри.

<div style="position: relative;">
    <div style="height: 100px; width: 100px; background: red; overflow: auto;">...</div>
    <div style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background: green;">...</div>
</div>

Ответ 3

Учитывая ваши спецификации, это лучшее, что я мог придумать:

<div style="position: relative; height: 100px; width: 100px; background: red;">
    <div style="height: 100px; width: 100px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background: green;"></div>
</div>

Там у вас есть div с overflow: auto;, поэтому появятся полосы прокрутки, если потребуется, и раскрывающийся div будет выглядеть так, как будто он расширяет "вне его родительский". Оба сохраняются вместе под одним и тем же родительским div, поскольку вы заявили, что они контекстуально релевантны друг другу.

Ответ 4

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head> <title>Test</title> </head>

<body>

<div style="position: relative; height: 100px; width: 100px; background: red; overflow: auto;">
        <div style="position: absolute; top: 20px; left: 20px; height: 10px; width: 10px;">
            <div style="position: fixed; height: 100px; width: 100px; background: green;"></div>
        </div>
</div>

</body>
</html>

Фокус в том, что фиксированный div w/o верхний/нижний/левый/правый указанный будет позиционировать себя в своей "статической" позиции, которая, кажется, вам нужна.

У вас могут быть проблемы с z-порядком, но из вашего объяснения вам нужно, чтобы ваше "меню" было выше всего остального. (Я предполагаю, что он приходит и уходит). У вас наверняка возникнут проблемы с печатью страницы - если есть более одной страницы, фиксированный элемент повторяется.

Как отметила Джвенема, в IE6 это не сработает.: (

Ответ 5

Это невозможно. Если вы установили overflow:auto в родительский DIV, который блокирует любой дочерний DIV от выхода из окна содержимого.

Вы можете попробовать и играть со значениями z-index, но это может привести к слепоте в левом глазу.

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

Ответ 6

Просто удалите часть переполнения: авто и закройте внутренний div правильно закрывающим тегом, таким образом, он работает в IE6, IE7, Firefox 3 и Opera = > вероятно, во всех браузерах.

Ответ 7

Я бы сказал, что причиной этого является то, что он чувствителен к контексту. Возможно, вы можете реструктурировать, как это настроено? У меня есть родительский div-класс, который предоставляет контекст этим двум и разделяет их друг от друга внутри этого div (используя относительное позиционирование, чтобы выровнять их по своему желанию?)

My 2c

Ответ 8

<div style="height: 100px; width: 100px">
    <div style="position:relative;border:1px solid blue;">
            <div style="position:absolute; z-index:-1; left: 20px; top:0; height: 200px; width: 200px; background: green;">
       
    </div>
</div>

Ответ 9

Попробуйте использовать overflow: visible; вместо этого.