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

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

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

Answer 2

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

Answer 3

为position:static的父母，为position:absolute的孩子或

为position:relative的父级，为position:fixed的子级（固定不变，永远不变）

您的left: 0; right:0;可同时使用这两种解决方案，请注意，无论div的display属性设置为什么，您的子div都会在代码中位于其下方的所有div之上。您将必须在下一个div上添加一个padding-top值以进行补偿（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);
    }

将子div扩展到容器div之外

4 个答案: