大家好。
我有一个 div 覆盖在另一个 div 中的情况。
当我在内部 div 中使用相对位置创建覆盖时，为什么主 div 不适合高度大小。
See the picture 我不能使用 position: absolute 因为我需要在主 div 内工作的滚动条。
查看代码:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: relative; top: -52px; left: 0px; z-index: 1;
width: 350px; height: 50px; border: solid 1px green;
} <!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>我可以使用其他 css 设置，但我需要 sinc 内部 div 的滚动。
最佳答案
如果我正确理解你的问题，这就是你需要的:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
position: relative;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: absolute;
top: 0;
left: 0px;
z-index: 1;
width: 350px;
height: 100%;
background: rgba(0,0,0,0.5);
} <!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2"></div>
</div>
</body>
</html>关于html - Div叠加高度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46819423/