css - 将子 div 扩展到容器 div 之外

Question

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

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

Answer 1

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

1. 在内部元素上使用负边距将其移动到父元素之外

2. 使用 Javascript 将内部元素移到父级之外。

3. 更改源代码并将内部元素移到父级之外。

4. position: fixed在内部元素上使用。这将允许内部元素突破，但不利的一面是元素将固定在给定位置（永不移动）。

5. 从父元素中移除position: relative;或者给父元素一个position: static

Answer 2

您可以尝试添加overflow:visible到 parent div，然后使 child 比 parent 更宽。

Answer 3

父到position:static, 子到position:absolute 或

Parent to position:relative, child to position:fixed（具有固定的，永不移动的缺点）

您left: 0; right:0;可以使用这两种解决方案，只需注意您的子 div 将在代码中绘制在其下方的任何 div 之上，无论 div 的display属性设置为什么。您要么必须padding-top向下一个 div 添加一个值来补偿（jsfiddle 中的简单示例），要么必须在下面的另一个 div 与孩子具有相同的高度行为（codepen 中更复杂的示例），这可能并不理想，但适用于简单的 html/css。

Answer 4

我有一个案例，我需要制作一个轮播并将其包裹在父元素之外。您可以将子元素设置为具有 awidth: 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);
    }

Answer 5

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