Как сделать так, чтобы абсолютно позиционированные (overflow: hidden) контейнеры с абсолютно позиционированными контейнерами показывались за пределами области их родителей? - PullRequest
Новая
       2

Как сделать так, чтобы абсолютно позиционированные (overflow: hidden) контейнеры с абсолютно позиционированными контейнерами показывались за пределами области их родителей?

4 голосов
/ 04 февраля 2011

Пожалуйста, рассмотрите этот пример: ( рабочий пример )

Объявления стиля: 

body {background:#333;font:1em Arial, Helvetica, sans-serif;}
h1 {color:#ececec;text-align:center;margin:1.5em 0 1em;}
h2 {font-weight:normal;font-size:1.15em;
    padding-bottom:5px;border-bottom:1px solid #999;}
p {padding-right:1em;color:#000;}
pre {font-size:1em;color:#06f;margin:1em 0;}

#wrapper {position:absolute;width:100px;height:100px;background:#ececec;
          overflow:hidden;zoom:1;padding:20px;border-bottom:1px solid #000;
          border-right:1px solid #000;border-top:1px solid #fff;
          border-left:1px solid #fff;}
.css {float:right;width:50%;}
.markup {float:left;width:50%;margin-right:-1px;}
.box1,
.box2,
.box3,
.box4 {background:#fff;position:absolute;padding:10px;border:1px solid #333;}
.box1 {left:0;top:-20px;}
.box2 {right:0;top:0;}
.box3 {left:0;bottom:0;}
.box4 {right:-20px;bottom:-20px;}

Разметка: 

<body>
<h1>overflow:hidden and absolutely positioned elements</h1>
<div id="wrapper">
<div class="markup">

      <div class="box1">box 1</div>
        <div class="box2">box 2</div>
        <div class="box3">box 3</div>
        <div class="box4">box 4</div>
</div>
</body>

Как вы можетесм. Box1 и Box4 обрезаны.Как я могу сделать их видимыми за пределами границ div'ов?Обычно поля должны отображаться как всплывающие подсказки (они должны быть самыми верхними элементами на странице).

Критерии относительно предпочтительного решения:

  • без изменений разметки
  • без использования CSS3
  • работает кросс-браузер
  • div с идентификатором wrapper должен оставаться абсолютно позиционированным и должен оставаться overflow:hidden

Редактировать: Я знаю, что мои требования жесткие, но я должен с ними работать.Я должен решить эту задачу в окружающей среде, над которой у меня нет абсолютного контроля.

Edit # 2: Хорошо, вот почему мне нужно, чтобы ящики не перемещались в разметке.В конкретной ситуации я хочу использовать их как всплывающие подсказки (в частности, советы по красоте) для других элементов.Положение всплывающей подсказки в дереве DOM является результатом внутренней работы библиотеки.Когда я хотел использовать подсказки по красоте, проблема, которая видна в моем примере, не позволяла отобразить всю подсказку: она была обрезана.

Ответы [ 3 ]

6 голосов
/ 04 февраля 2011

То, что вы пытаетесь сделать, невозможно при заданных вами условиях.По определению, overflow: hidden обрезает любой контент или контент внутри элемента-потомка, который выходит за пределы области просмотра родительского элемента.

Единственный способ заставить его работать - это удалить переполнение: скрытый или переместитьобрезанные коробки снаружи обертки.

http://www.w3.org/TR/CSS21/visufx.html

2 голосов
/ 04 февраля 2011

Ну, ваш блок #wrapper является первым позиционированным предком, отличным от заданного по умолчанию, и поэтому формирует ограничивающий блок для box1 до box4.И поскольку вы установили #wrapper на overflow: hidden, он скрывает части от box1 до box4, которые перекрывают его край.

Вы можете удалить overflow: hidden из #wrapper, или выможет переместить эти поля за пределы #wrapper.

0 голосов
/ 04 февраля 2011

Удалить overflow:hidden из wrapper и готово.

...