将子 div 扩展到容器 div 之外答案

【问题标题】：Extend child div beyond container div将子 div 扩展到容器 div 之外
【发布时间】：2012-10-02 17:12:45
【问题描述】：

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

但问题是我当前的#container 有一个{position:relative;} 属性，因此如果我将{position:absolute} 应用于子div，它只会引用#container。有没有办法将我的子 div 扩展到 #container 之外？

【问题讨论】：

如果它相对于身体绝对定位，是否有任何理由不能将元素带到当前父级之外？此外，查看您的特定代码和应用程序也可以帮助我们...
FWIW，我在这个姐妹问题上找到了我需要的解决方案 - stackoverflow.com/questions/31391459/…

标签： css positioning css-position

【解决方案1】：

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

在内部元素上使用负边距将其移到父元素之外
使用 Javascript 将内部元素移到父级之外。
更改源代码并将内部元素移到父级之外。
在内部元素上使用position: fixed。这将允许内部元素突破，但不利的一面是元素将固定在给定位置（永不移动）。
从父元素中移除position: relative;或者给父元素一个position: static

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

position:static 的父级，position:absolute 的子级或

position:relative 的父级，position:fixed 的子级（具有固定不变的缺点）

您的left: 0; right:0; 可以与这两种解决方案一起使用，请注意，无论 div 的display 属性设置为什么，您的子 div 都会在代码中绘制在其下方的任何 div 之上。您要么必须将 padding-top 值添加到下一个 div 以进行补偿 (simple example in jsfiddle)，要么在下面的另一个 div 与孩子 (a much more elaborate example in codepen) 具有相同的高度行为，这可能并不理想，但可以在简单的 html/css 中。

【讨论】：

【解决方案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);
    }

【讨论】：

【解决方案5】：

上面的答案都没有提到这样做的最佳方法，在全宽容器上使用position:relative，在任何集中/偏移 div 内部的 div 上使用position:absolute;left:0;width:100%;，只要没有其他容器声明位置:relative，这会起作用的。

【讨论】：