html - 防止多个固定定位元素重叠

Question

如果我的页面上有两个 div。一个在页面顶部style="position:fixed; left:0; top:0;right:0;"有固定定位，一个在页面左侧有固定定位style="position:fixed; left:0; top:0;bottom:0;" 有没有办法让左侧 div 定位，使其顶部边缘与顶部定位 div 的底部边缘对齐，没有硬编码边距或填充？默认情况下会有一些部分重叠

标签： htmlcss

Answer 1

试试这个，我想你也想做同样的事情。

.parent{
position: relative;
background-color: #000;
width: 600px;
height: 400px;
}
.child1,.child2{
position: absolute;
left: 0;
background-color: #f00;
height: 190px;
}
.child1{
top: 0;
right: 0;
}
.child2{
bottom: 0;
width: 200px;
}

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>