类圆显示在属于绝对的区域。我认为它应该出现在它下面，而不是重叠它。当我把它放在上面时，它显示正常(嗯，在上面(。为什么它不显示在底部？
.gen {
font-size: 60px;
width: 70vw;
height: 70vh;
}
.relative {
background-color: darksalmon;
height: 50vh;
width: 50vw;
font-family: 'Ma Shan Zheng', cursive;
font-size: 13vw;
text-overflow: ellipsis;
overflow: hidden;
border: 3px solid black;
margin: 3px;
}
.abslute {
background-color: rgb(32, 185, 231);
height: 70%;
width: 70%;
font-size: 13vw;
border: 3px solid black;
}
h1 {
border: 3px solid black;
background-color: burlywood;
width: 35%;
height: 35%;
font-size: 10vw;
}
.circle {
border: 3px solid black;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: rgba(241, 13, 13, 0.767);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
@import url("https://fonts.googleapis.com/css?family=Ma+Shan+Zheng&display=swap");
</style>
<body>
<div class="circle">circle</div>
<div class="gen">
<div class="relative">Words relative</div>
<div class="abslute">Other absolute</div>
</div>
<div class="circle">circle</div>
</body>
</html>您的.gen类限制了视图高度，因此您的圆重叠。我在下面的代码片段中扩展了视图宽度，以便您可以看到差异。
完全删除.gen类也可以。
.gen {
font-size: 60px;
width: 100vw;
height: 200vh;
}
.relative {
background-color: darksalmon;
height: 50vh;
width: 50vw;
font-family: 'Ma Shan Zheng', cursive;
font-size: 13vw;
text-overflow: ellipsis;
overflow: hidden;
border: 3px solid black;
margin: 3px;
}
.abslute {
background-color: rgb(32, 185, 231);
height: 70%;
width: 70%;
font-size: 13vw;
border: 3px solid black;
}
h1 {
border: 3px solid black;
background-color: burlywood;
width: 35%;
height: 35%;
font-size: 10vw;
}
.circle {
border: 3px solid black;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: rgba(241, 13, 13, 0.767);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
@import url("https://fonts.googleapis.com/css?family=Ma+Shan+Zheng&display=swap");
</style>
<body>
<div class="circle">circle</div>
<div class="gen">
<div class="relative">Words relative</div>
<div class="abslute">Other absolute</div>
</div>
<div class="circle">circle</div>
</body>
</html>