Question

我正在尝试创建一个页面，其中某个div需要显示并替换另一个div（另一个div将被设置为不可见）。

我可以使用position: absolute;获得另一个div的第一个div 但现在的问题是两个div也在其他div中。如果我使用position: absolute;，那么这两个div将与其他div重叠。我做了一个例子请看看：

＆＃13;

#wrapper {
    background-color: red;
    min-height: 700px;
  }

#list1 {
  background-color: yellow;
  min-height: 200px;
  position: relative;
}

#listinList {
  background-color: blue;
  min-height: 200px;
  position: absolute;
}

#listOverList {
  background-color: green;
  min-height: 200px;
  position: absolute;
}

＆＃13;

<div id="list1">
  beginning list 1

  <div id="listinList">
    The first list
  </div>

  <div id="listOverList">
    this must go over the listinlist div
  </div>
</div>

＆＃13;

我现在的问题是：如何让绿色块（如示例中所示）留在黄色包装div中。

Answer 1

只需隐藏div#listinList即可。在此之后，将位置添加到div#listOverList。我已将div#listOverList设置为半透明度以显示黄色div上的位置。

＆＃13;

#wrapper {
    background-color: red;
    min-height: 700px;
  }

#list1 {
  background-color: yellow;
  min-height: 200px;
  position: relative;
}

#listinList {
  background-color: blue;
  min-height: 200px;
  position: absolute;
  display: none;
}

#listOverList {
  min-height: 200px;
  background-color: green;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}

＆＃13;

<div id="list1">
  beginning list 1
  <div id="listinList">
    The first list
  </div>
  <div id="listOverList">
    this must go over the listinlist div
  </div>
</div>

＆＃13;

Answer 2

尝试重叠问题：

＆＃13;

<html>
<head>
	<title></title>
	<style>
	#wrapper{
		background-color: red;
		min-height:700px;
	}

	#list1{
		background-color:yellow;
		min-height:200px;
		position:relative;
	}

	#listinList {
               background-color: blue;
               min-height: 170px;
               position: absolute;
               width: 20%;
        }
	#listOverList {
               background-color: green;
               min-height: 170px;
               position: absolute;
               right: 0;
               width: 80%;
        }

＆＃13;

<body>

<div id= "wrapper">

	top
<div id="list1">
	beginning list 1
	<div id="listinList">
		The first list
	</div>
	<div id="listOverList">
		this must go over the listinlist div
	</div>
</div>	

test
</div>


</body>

＆＃13;

Answer 3

不确定这是否是你想要的，但根据你的小提琴，你是否尝试过添加你想要的实际位置#listinList和/或#listOverList，例如。

#listOverList {
  ...
  top: 0;
  left: 0;
}

这会导致div完全覆盖其父级。

Div替换div但重叠包装

3 个答案: