Question

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Title</title>
	<style>
		.red {
			height: 200px;
			background-color: red;
		}
		.green {
			height: 300px;
			background-color: green;
			width: 200px;
		}
		.yellow {
			height: 400px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="red">
		<div class="green"></div>
	</div>
	<div class="yellow"></div>
</body>
 
<script>
 
</script>
</html>

如上面的代码所示，绿色div的高度为300px。但是，由于被黄色div覆盖，因此无法完全显示。

所以我想问一下如何充分显示绿色div，以便它可以如下所示。

Answer 1

为样式添加z-index属性。另一个很棒的资源：w3schools

另外，将.green的高度更改为600px，使其覆盖整个屏幕：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Title</title>
  <style>
    .red {
      height: 200px;
      background-color: red;
      z-index: 0;
    }
    
    .green {
      height: 600px;
      position: absolute;
      background-color: green;
      width: 200px;
      z-index: 99;
    }
    
    .yellow {
      height: 400px;
      background-color: yellow;
      z-index: -1;
    }
  </style>
</head>

<body>
  <div class="green"></div>
  <div class="red"></div>


  <div class="yellow"></div>
</body>

<script>
</script>

</html>

这将使绿色div位于具有较低z-index的任何内容的顶部，因为10 > 1

Answer 2

.red {
  height: 200px;
  background-color: red;
}

.green {
  height: 300px;
  background-color: green;
  width: 200px;
  display: inline-table;
}

.yellow {
  height: 400px;
  background-color: yellow;
}

<div class="red">
  <div class="green"></div>
</div>
<div class="yellow"></div>

您可以使用display: inline-table：

.green {
    height: 300px;
    background-color: green;
    width: 200px;
    display: inline-table;
}

Answer 3

像这样使用z-index播放：

       .red {
    			height: 200px;
    			background-color: red;
          z-index: 1;
    		}
    		.green {
    			height: 300px;
    			background-color: green;
    			width: 200px;
          z-index: 99; 
          float:left; 
    		}
    		.yellow {
    			height: 400px;
    			background-color: yellow;
          z-index: -1;
    		}

<div class="red">
		<div class="green"></div>
	</div>
	<div class="yellow"></div>

Answer 4

您只需要使绿色div定位即可。没什么。

.red {
  height: 200px;
  background-color: red;
}

.green {
  height: 300px;
  background-color: green;
  width: 200px;
  position: relative;
}

.yellow {
  height: 400px;
  background-color: yellow;
}

<div class="red">
  <div class="green"></div>
</div>
<div class="yellow"></div>

或者红色：

.red {
  height: 200px;
  background-color: red;
  position: relative;
}

.green {
  height: 300px;
  background-color: green;
  width: 200px;
}

.yellow {
  height: 400px;
  background-color: yellow;
}

<div class="red">
  <div class="green"></div>
</div>
<div class="yellow"></div>

默认情况下，绘制顺序将首先按照树顺序绘制绿色和红色，然后按照黄色顺序绘制黄色，但是将其中一个放置为正斜线将使其稍后绘制。

一些相关问题，以获取有关绘画顺序的更多详细信息：

Why does position:relative; appear to change the z-index?

Why using absolute position causes the div to be on top?

Answer 5

只需为红色课程添加position: relative。

如何显示其他div覆盖的div

5 个答案: