Question

Hy guys。

我在另一个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的滚动。

Answer 1

如果我理解你的问题，这就是你需要的：

＆＃13;

 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);
    }

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
	<div class="box1">box 1</div>
	<div class="box2"></div>
</div>
</body>
</html>

＆＃13;

Answer 2

position: relative仍保留原始空间的元素 - 它只会将元素从顶部/底部/左/右值移动到原始位置。但是，如果没有这些设置，自由空间仍然存在。具有自动高度的包装容器将表现为相对定位的元素仍然处于其原始位置，从而导致您在问题中提出的内容。

因此，要强制使用您想要的解决方案，您必须在容器元素上使用固定高度和overflow-y: hidden。

div.main {
  width: 300px;
  height: 52px;
  border: solid 1px black;
  overflow-y: hidden;
}

div.box1 {
  width: 350px;
  height: 50px;
  border: solid 1px red;
}

div.box2 {
  position: relative;
  top: -52px;
  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>

Div重叠高度问题

2 个答案: