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

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

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

Ответы

Ответ 1

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

Используйте отрицательные поля для внутреннего элемента, чтобы переместить его вне родительского
Используйте Javascript для перемещения внутреннего элемента вне родителя.
Измените исходный код и переместите внутренний элемент вне родителя.
Используйте position: fixed для внутреннего элемента. Это позволит внутреннему элементу вырваться, но имеет нижнюю сторону, чтобы элемент был зафиксирован в данной позиции (никогда не двигаясь).
Удалите position: relative; из родительского элемента или укажите родительский элемент a position: static

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

У меня был случай, когда мне нужно было сделать карусель и обернуть ее за пределы родительского элемента. Вы можете установить для дочернего элемента width: 100vw а для родительского элемента - max-width определенного количества пикселей... или рассчитанного количества. При такой настройке наш дочерний компонент выходит за пределы родительского. JSFiddle

    .parent {
     // our parent container has 20px margins on each side so we set its max width accordingly
      max-width: calc(100vw - 20px)
    }

    .child {
      // set the child to wrap the entire viewport width. Account for any margins from the parent and offset them with a negative margin
      width: 100vw;
      transform: translateX(-20px);
    }