在父元素之外拉伸元素

Question

我的身体里有3个div：一个容器，一个父母和一个孩子 我试图让孩子在左侧延伸到父母之外 但如果我使用position: absolute，父母将不会伸展到所需的高度...

position: static

position: absolute

使用margin-left: -20px也不会：最终，我将拥有其他嵌套父级，并且需要所有子级扩展到左外侧。

到目前为止，我的代码是

#container {
    position: absolute;
    width: 300px;
}

.parent {
    margin-left: 20px;
}

.child {
    padding: 30px;
}

在纯CSS中用任何方法做到这一点？

编辑：这是我的HTML代码，这样您就可以看到父母将如何相互嵌套：

<div id="container">

    <div class="parent">
        <div class="child"></div>

        <div class="parent">
            <div class="child"></div>
        </div>
    </div>

    <div class="parent">
        <div class="child"></div>
    </div>

</div>

编辑2：我必须指出我的代码中有多个（无限级）嵌套级别。上面的html示例只是一个片段。

Answer 1

为什么不简单地使用

Demo Fiddle

.child {
    height: 60px;
    position:relative;
    left:-20px;
}

您可以使用position:relative来证明父母边界之外的内容是正确的，只要在父级上没有设置overflow:hidden。

Answer 2

使用这种风格

.stretch-block {width: 100vw; position: relative; left:50%; right:50%; margin-left: -50vw; margin-right: -50vw;}