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

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

29 голосов
/ 24 февраля 2009

У меня относительно позиционированный div, для которого установлено overflow: auto. В этом у меня есть 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>

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

Ответы [ 8 ]

42 голосов
/ 04 марта 2009

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

Чтобы избежать этой проблемы, вы можете удалить «position :lative» из внешнего div и добавить div-оболочку с «position :lative;». Затем вам нужно будет добавить "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>
5 голосов
/ 24 февраля 2009

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

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

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

<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>
4 голосов
/ 06 марта 2009

Вы используете абсолютное позиционирование внутреннего 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 без указанных сверху / снизу / слева / справа будет позиционироваться в своем «статическом» положении, что, похоже, вам и нужно.

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

Как указал jvenema, это не сработает в IE6. (

4 голосов
/ 04 марта 2009

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

<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, поскольку вы указали, что они контекстуально имеют отношение друг к другу.

3 голосов
/ 06 марта 2009

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

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

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

0 голосов
/ 04 марта 2009

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

Мой 2с

0 голосов
/ 24 февраля 2009

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

0 голосов
/ 24 февраля 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...