我正在学习HTML5和CSS，但出现此错误，div 显示在其他div 后面。我正在尝试用下面显示的框来分隔钻石，当单击钻石时，它会跳转到页面的该部分(我仍在处理，不需要那里的帮助)。
有人可以帮我几个小时吗？我正在尝试显示菱形下方的矩形框，我知道CSS部分有问题，但找不到错误帮助将不胜感激，谢谢。
/*layout of body page*/
*{
margin:0;
padding:0;
background-color: #000;
font-family: poppins, sans-serif;
}
/*dimonds cover page top*/
.main-nav{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
margin:0;
padding: 0;
width:600px;
height:150px;
}
.main-nav li{
list-style: none;
position: absolute;
width: 200px;
height: 200px;
transform:rotate(45deg);
transition: 0.5s;
margin: -100px;
overflow: hidden;
opacity: 0.6;
border-color: rgb(236, 39, 236);
border: solid rgb(236, 39, 236)
}
.main-nav li:hover{
opacity: 1;
cursor: pointer;
}
/*about me button*/
.main-nav li.item1{
top: 0;
left: 0;
color: white;
font-size: 47px;
-webkit-text-stroke: 1px #6531a8;
text-shadow: 0px 2px 4px #8c31b6;
}
.main-nav li.item2{
bottom: 0;
left: 25%;
color: white;
font-size: 47px;
}
.main-nav li.item3{
top:0;
left: 50%;
color: white;
font-size: 47px;
}
.main-nav li.item4{
top: 100%;
left: 75%;
color: white;
font-size: 47px;
}
.main-nav li.item5{
top: 0%;
left: 100%;
color: white;
font-size: 47px;
}
.main-nav li.bg{
width: 100%;
height: 100%;
transform: scale(1.1);;
}
.title{
background-color: rgb(192, 183, 183);
top: 0;
width: 75px;
height: 0;
margin: 70px;
transform: rotate(-45deg);
justify-content: center;
display: flex;
text-align: center;
font-family: popping, sans-serif;
font-size: x-large;
font-weight: 700;
position: relative;
left: -40px;
}
.main-nav li.item1 .bg{
background-size:cover;
background-position: center;
}
.nav-title{
border-radius: 25%;
border: solid 2px rgb(236, 39, 236);
height: 71%;
width: 386px;
align-content: center;
color: white;
display: inline;
}
.nav-title:nth-child(n + 2){
margin-left: -1px;
}
/*border lines for dimonds bottom page */
#container{
padding:5px;
width:100%;
height:500px;
}
.row{
min-height:50px;
margin-top:25px;
width:90%;
margin-left:auto;
margin-right:auto;
padding:2%;
}
.half-row{
display:inline-block;
width:50%;
margin:1%;
height:25%;
color:white;
border: 2px solid yellow;
border-radius: 25px;
}
.textting{
color:white;
height: auto;
width: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page Jump</title>
</head>
<body>
<ul class="main-nav">
<button onclick=""> <!--jump to first section box-->
<!-- first is picked-->
<li class="item1">
<div class="bg">
<div class="title">
First
</div>
</div>
</li>
</button>
<!-- second button is clicked-->
<button onclick=""> <!--jump to 2 section box-->
<li class="item2">
<div class="bg">
<div class="title">
Second
</div>
</div>
</li>
</button>
<!--Third box info is clicked-->
<button onclick=""> <!--jump to first section box-->
<li class="item3">
<div class="bg">
<div class="title">
Third
</div>
</div>
</li>
</button>
<!--fourth div is cliked-->
<button onclick=""> <!--jump to first section box-->
<li class="item4">
<div class="bg">
<div class="title">
Fourth
</div>
</div>
</li>
</button>
<!--firth is cliked -->
<button onclick=""> <!--jump to first section box-->
<li class="item5">
<div class="bg">
<div class="title">
Fifth
</div>
</div>
</li>
</button>
</ul>
<div id="container">
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
First Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Second Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Third Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Third Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Fourth Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Fifth Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
</div>
</body>
<script>
</script>
</html>尝试将填充顶部添加到 css #container 即填充顶部：350px;
/*layout of body page*/
*{
margin:0;
padding:0;
background-color: #000;
font-family: poppins, sans-serif;
}
/*dimonds cover page top*/
.main-nav{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
margin:0;
padding: 0;
width:600px;
height:150px;
}
.main-nav li{
list-style: none;
position: absolute;
width: 200px;
height: 200px;
transform:rotate(45deg);
transition: 0.5s;
margin: -100px;
overflow: hidden;
opacity: 0.6;
border-color: rgb(236, 39, 236);
border: solid rgb(236, 39, 236)
}
.main-nav li:hover{
opacity: 1;
cursor: pointer;
}
/*about me button*/
.main-nav li.item1{
top: 0;
left: 0;
color: white;
font-size: 47px;
-webkit-text-stroke: 1px #6531a8;
text-shadow: 0px 2px 4px #8c31b6;
}
.main-nav li.item2{
bottom: 0;
left: 25%;
color: white;
font-size: 47px;
}
.main-nav li.item3{
top:0;
left: 50%;
color: white;
font-size: 47px;
}
.main-nav li.item4{
top: 100%;
left: 75%;
color: white;
font-size: 47px;
}
.main-nav li.item5{
top: 0%;
left: 100%;
color: white;
font-size: 47px;
}
.main-nav li.bg{
width: 100%;
height: 100%;
transform: scale(1.1);;
}
.title{
background-color: rgb(192, 183, 183);
top: 0;
width: 75px;
height: 0;
margin: 70px;
transform: rotate(-45deg);
justify-content: center;
display: flex;
text-align: center;
font-family: popping, sans-serif;
font-size: x-large;
font-weight: 700;
position: relative;
left: -40px;
}
.main-nav li.item1 .bg{
background-size:cover;
background-position: center;
}
.nav-title{
border-radius: 25%;
border: solid 2px rgb(236, 39, 236);
height: 71%;
width: 386px;
align-content: center;
color: white;
display: inline;
}
.nav-title:nth-child(n + 2){
margin-left: -1px;
}
/*border lines for dimonds bottom page */
#container{
padding:5px;
padding-top:350px; /*edit here*/
width:100%;
height:500px;
}
.row{
min-height:50px;
margin-top:25px;
width:90%;
margin-left:auto;
margin-right:auto;
padding:2%;
}
.half-row{
display:inline-block;
width:50%;
margin:1%;
height:25%;
color:white;
border: 2px solid yellow;
border-radius: 25px;
}
.textting{
color:white;
height: auto;
width: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page Jump</title>
</head>
<body>
<ul class="main-nav">
<button onclick=""> <!--jump to first section box-->
<!-- first is picked-->
<li class="item1">
<div class="bg">
<div class="title">
First
</div>
</div>
</li>
</button>
<!-- second button is clicked-->
<button onclick=""> <!--jump to 2 section box-->
<li class="item2">
<div class="bg">
<div class="title">
Second
</div>
</div>
</li>
</button>
<!--Third box info is clicked-->
<button onclick=""> <!--jump to first section box-->
<li class="item3">
<div class="bg">
<div class="title">
Third
</div>
</div>
</li>
</button>
<!--fourth div is cliked-->
<button onclick=""> <!--jump to first section box-->
<li class="item4">
<div class="bg">
<div class="title">
Fourth
</div>
</div>
</li>
</button>
<!--firth is cliked -->
<button onclick=""> <!--jump to first section box-->
<li class="item5">
<div class="bg">
<div class="title">
Fifth
</div>
</div>
</li>
</button>
</ul>
<div id="container">
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
First Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Second Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Third Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Third Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Fourth Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Fifth Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
</div>
</body>
<script>
</script>
</html>您正在使用position: absolute来定位钻石。这会将它们定位到body元素，除非您将它们放在使用position: relativedivdiv和样式中。然后，该div中li元素的位置将相对于该div进行定位。因此，将ul和li元素包装在div中，在该div上设置一个类以posiiton: relative然后将其他标记推到该div下方。
我还看到您正在使用transform:translate并将钻石向上推，因此请在容器div中添加一个margin-top，以便看到钻石。下面是示例。
* {
margin: 0;
padding: 0;
background-color: #000;
font-family: poppins, sans-serif;
}
.ul-container {
position: relative;
margin-top: 300px;
}
/*dimonds cover page top*/
.main-nav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
width: 600px;
height: 150px;
}
.main-nav li {
list-style: none;
position: absolute;
width: 200px;
height: 200px;
transform: rotate(45deg);
transition: 0.5s;
margin: -100px;
overflow: hidden;
opacity: 0.6;
border-color: rgb(236, 39, 236);
border: solid rgb(236, 39, 236)
}
.main-nav li:hover {
opacity: 1;
cursor: pointer;
}
/*about me button*/
.main-nav li.item1 {
top: 0;
left: 0;
color: white;
font-size: 47px;
-webkit-text-stroke: 1px #6531a8;
text-shadow: 0px 2px 4px #8c31b6;
}
.main-nav li.item2 {
bottom: 0;
left: 25%;
color: white;
font-size: 47px;
}
.main-nav li.item3 {
top: 0;
left: 50%;
color: white;
font-size: 47px;
}
.main-nav li.item4 {
top: 100%;
left: 75%;
color: white;
font-size: 47px;
}
.main-nav li.item5 {
top: 0%;
left: 100%;
color: white;
font-size: 47px;
}
.main-nav li.bg {
width: 100%;
height: 100%;
transform: scale(1.1);
;
}
.title {
background-color: rgb(192, 183, 183);
top: 0;
width: 75px;
height: 0;
margin: 70px;
transform: rotate(-45deg);
justify-content: center;
display: flex;
text-align: center;
font-family: popping, sans-serif;
font-size: x-large;
font-weight: 700;
position: relative;
left: -40px;
}
.main-nav li.item1 .bg {
background-size: cover;
background-position: center;
}
.nav-title {
border-radius: 25%;
border: solid 2px rgb(236, 39, 236);
height: 71%;
width: 386px;
align-content: center;
color: white;
display: inline;
}
.nav-title:nth-child(n + 2) {
margin-left: -1px;
}
/*border lines for dimonds bottom page */
#container {
padding: 5px;
padding-top: 350px;
/*edit here*/
width: 100%;
height: 500px;
}
.row {
min-height: 50px;
margin-top: 25px;
width: 90%;
margin-left: auto;
margin-right: auto;
padding: 2%;
}
.half-row {
display: inline-block;
width: 50%;
margin: 1%;
height: 25%;
color: white;
border: 2px solid yellow;
border-radius: 25px;
}
.textting {
color: white;
height: auto;
width: auto;
}<div class="ul-container">
<ul class="main-nav">
<button onclick="">
<!--jump to first section box-->
<!-- first is picked-->
<li class="item1">
<div class="bg">
<div class="title">
First
</div>
</div>
</li>
</button>
<!-- second button is clicked-->
<button onclick="">
<!--jump to 2 section box-->
<li class="item2">
<div class="bg">
<div class="title">
Second
</div>
</div>
</li>
</button>
<!--Third box info is clicked-->
<button onclick="">
<!--jump to first section box-->
<li class="item3">
<div class="bg">
<div class="title">
Third
</div>
</div>
</li>
</button>
<!--fourth div is cliked-->
<button onclick="">
<!--jump to first section box-->
<li class="item4">
<div class="bg">
<div class="title">
Fourth
</div>
</div>
</li>
</button>
<!--fifth is cliked -->
<button onclick="">
<!--jump to first section box-->
<li class="item5">
<div class="bg">
<div class="title">
Fifth
</div>
</div>
</li>
</button>
</ul>
</div>
<div id="container">
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
First Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Second Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Third Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Third Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Fourth Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div class="row">
<div class="half-row" style="width:15%;">
<div class="textting">
<h1>
Fifth Info
</h1>
</div>
</div>
<div class="half-row">
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
</div>