Css 如何使父div精确包含具有position:relative和offset的子div？ .外部{ 边框：1px纯黑； 宽度：200px； } .首先{ 背景色：rgba（20,20200,0.5）； 高度：100px； } .第二{ 位置：相对位置； 顶部：-20px； 背景色：rgba（50,50,50,5）； 高度：100px； }

---

我需要父类精确地包含这两个子类。当子div定位为相对时（为了向上或向下移动它），父类仍然可以看到处于静态位置的子类。您可以在底部看到20px的间隙。我需要家长严格控制孩子。是否有非javascript解决方案？

而不是使用偏移量：

---

不是使用偏移，而是：

---

不是使用偏移，而是：

---

不是使用偏移，而是：

<div class="outer">
    <div class="first">
    </div>
    <div class="second">
    </div>
</div>

.outer {
    border: 1px solid black;
    width: 200px;
}
.first{
    background-color: rgba(20,20,200,0.5);
    height: 100px;
}
.second{
    position:relative;
    top:-20px;
    background-color: rgba(50,50,50,.5);
    height: 100px;
}

.second{
    margin-top:-20px;
    background-color: rgba(50,50,50,.5);
    height: 100px;
}