<!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完全显示,就像下面这样。