将子div扩展到容器div之外

Question

我正试图通过浏览器的宽度扩展这个div。我从here读到你可以使用{position:absolute; left: 0; right:0;}实现这一点，就像在这里的jsfiddle：http://jsfiddle.net/bJbgJ/3/

但问题是我目前的#container有一个{position:relative;}属性，因此如果我将{position:absolute}应用于子div，它只会引用#container。有没有办法让我的孩子div超出#container？

Answer 1

我可以想出五种可能实现目标的方法：

1. 在内部元素上使用负边距将其移动到父元素之外
2. 使用Javascript将内部元素移动到父元素之外。
3. 更改源代码并将内部元素移到父元素之外。
4. 在内部元素上使用position: fixed。这将允许内部元素突破但具有向下的元素将被固定在给定位置（从不移动）。
5. 从父元素中删除position: relative;或者给父元素一个position: static

Answer 2

您可以尝试将overflow:visible添加到父级div，然后让孩子比父级更宽。

Answer 3

父母到position:static，孩子到position:absolute或

父母到position:relative，孩子到position:fixed（固定的，永不移动的下行）

您的left: 0; right:0;适用于这两种解决方案，只需注意您的子div将在代码中绘制在其下方的任何div之上，无论div的display属性设置为什么。你要么必须将padding-top值添加到下一个div来补偿（simple example in jsfiddle），或者下面的另一个div具有与孩子相同的高度行为（a much more elaborate example in codepen），这可能不是理想的，但是在简单的html / css中工作。

Answer 4

我有一个案例，我需要制作一个旋转木马并将其包裹在父元素之外。您可以将子元素设置为具有width: 100vw，并将父元素设置为具有特定像素数量的最大宽度...或计算量。通过此设置，我们的子组件可以扩展到父组件之外。 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);
    }