it-swarm.com.ru

Расширить дочерний div за пределы контейнера div

Я пытаюсь расширить этот div с шириной браузера. Я читал из здесь , Что вы можете использовать {position:absolute; left: 0; right:0;} для достижения этого, как в jsfiddle здесь: http://jsfiddle.net/bJbgJ/3/

Но проблема в том, что мой текущий #container имеет свойство {position:relative;}, и, следовательно, если я применю {position:absolute} к дочернему элементу div, он будет ссылаться только на #container. Есть ли способ продлить погружение моего ребенка за пределы #container?

16
Ryan Ma

Я могу придумать пять способов потенциально достичь вашей цели:

  1. Используйте отрицательные поля на внутреннем элементе, чтобы переместить его за пределы родительского элемента.

  2. Используйте Javascript, чтобы переместить внутренний элемент за пределы родителя.

  3. Измените исходный код и переместите внутренний элемент за пределы родительского.

  4. Используйте position: fixed на внутреннем элементе. Это позволит внутреннему элементу вырваться, но имеет обратную сторону, что элемент будет зафиксирован в данной позиции (никогда не двигаясь).

  5. Удалите position: relative; из родительского элемента или присвойте родительскому элементу position: static

29
Brett

Вы можете попробовать добавить overflow:visible к родительскому div, а затем сделать дочерний элемент шире, чем родительский.

5
Jules

Родитель к position:static, потомок к position:absolute Или

Родитель к position:relative, потомок к position:fixed (с фиксированным, никогда не двигается вниз)

Ваш left: 0; right:0; работает с обоими этими решениями, просто обратите внимание, что ваш дочерний div будет рисовать поверх любого div под ним в коде, независимо от того, какое свойство div display установлено. Вам нужно будет либо добавить значение padding-top к следующему элементу div для компенсации ( простой пример в jsfiddle ), либо другой элемент div с таким же поведением высоты, как у дочернего элемента ( гораздо более сложный пример в codepen ), что, вероятно, не идеально, но работает в простом html/css.

0
Brad Butler