Расширение позиции абсолютный div вне переполнения скрытый div

Я не делал css в течение нескольких месяцев, поэтому я мог бы пропустить что-то простое, но независимо от решения, я не мог понять это. Итак, вот проблема.

Вот упрощенная версия моего кода:

<div id="wrapper" style="position: fixed; overflow: hidden; height: 100%; width: 200px;">
  <div id="test" style="position: absolute; margin-left: -200px;"></div>
</div>

Итак, в основном, мне нужно, чтобы внутренний тест div растягивался на 200 пикселей влево, за пределами внешней оболочки div. Проблема в том, что моя оболочка переполнена: скрыта, и она не позволит выйти наружу. Мне нужно, чтобы он оставался переполненным: скрытый, хотя из-за некоторого плагина js, который я использую.

Есть ли какие-нибудь обходные пути? Благодаря

Ответы

Ответ 1

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

Вы можете ввести еще один слой в своей иерархии, в результате чего внутренний div будет переполнен, а внешний div - нет. Затем поместите этот позиционированный элемент во внешний div. Псевдо пример:

<div class="outer">
  <div class="inner" style="overflow: hidden;">
    ....
  </div>

  <div class="abs-positioned">
  </div>
</div>

Если случайно вы разместили старый div с overflow:hidden, вы переместили бы эту настройку в div outer, позволяя вещам правильно позиционировать.

Итак, короткий ответ: никакое решение не позволит вам делать то, что вы хотите, не изменяя свой CSS, чтобы не быть overflow:hidden или без изменения разметки.

Ответ 2

Расширение на Piyas De:

пример

Заметьте, что если скрытый переполнения имеет

position: relative

тогда он не будет работать

не работает пример

Ответ 3

Что-то вроде -

<div id="textChange" style="overflow:hidden; padding-left:250px;">This is wrapper Div
This is wrapper Div<br/>
This is wrapper Div<br/>
<div id="textChange1" style="position:absolute;left:50; top: 50;">
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
</div>
This is wrapper Div<br/>
This is wrapper Div<br/>
This is wrapper Div<br/>
</div>

Может решить вашу проблему.

Смотри.. поможет ли это или нет...

Ответ 4

Скрытый переполнения можно фактически игнорировать, если соблюдены следующие правила:

  • Переполняющий дочерний элемент имеет абсолютное позиционирование
  • У родителя с скрытым переполнением есть статическое позиционирование
  • Добавлена ​​вторая родительская оболочка с относительным позиционированием

HTML

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="overflowed">(Overflowing the wrapper)</div>
  </div>
</div>

CSS

.outer-wrapper {
  position: relative;
}
.wrapper {
  overflow: hidden;
}
.overflowed {
  position: absolute;
}

FIDDLE http://jsfiddle.net/vLsmmrz6/

Ответ 5

Здесь исправление, которое не требует Javascript или что-то перемещает. Просто добавьте родительскую обертку с шириной и высотой #wrapper.

<div id="parent_wrapper" style="width:200px">
  <div id="wrapper" style="position: absolute; overflow: hidden; height: 100%; width: 300px;">
    <div id="test" style="position: absolute; margin-left:200px;">Test</div>
  </div>
</div>

Также см. мой живой пример: http://jsfiddle.net/ovjdqj4o/