我正在使用2个div元素。这些元素彼此重叠，但我希望它们一个接一个地跟随。
<!DOCTYPE>
<html>
<head>
<title>Online</title>
<style>
.rectangle {
min-height: 40px;
margin-bottom: 20px;
border: 1px solid transparent;
height: 65px;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
border-radius: 0px;
background-color:#67518e;
z-index:15;
}
.section-content {
padding-top: 30px;
padding-bottom: 30px;
border-top: 1px solid green;
border-bottom: 1px solid green;
position: absolute;
right: 0;
left: 0;
z-index: 10;
background-color: yellow;
}
</style>
</head>
<body>
<div class="rectangle">
</div>
<div class="section-content">
</div>
答案 0 :(得分：4)
这种情况正在发生，因为您正在使用position: fixed来使用类.rectangle的元素。一个没有更改位置的解决方案是将margin-top: 59px用于元素.section-content：
.rectangle {
min-height: 40px;
margin-bottom: 20px;
border: 1px solid transparent;
height: 65px;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
border-radius: 0px;
background-color: #67518e;
z-index: 15;
}
.section-content {
padding-top: 30px;
padding-bottom: 30px;
border-top: 1px solid green;
border-bottom: 1px solid green;
position: absolute;
right: 0;
left: 0;
z-index: 10;
background-color: yellow;
margin-top: 59px;
}<div class="rectangle"></div>
<div class="section-content">
您可以仔细查看有关该职位的documentation。
答案 1 :(得分：1)
删除定位声明，因为这会导致您的问题:(我还删除了一些未使用的'其他'css。）
由于Position:absolute;将
将自身与最近的祖先对齐，其相对高度为
重要的是要知道，因为你有第一个div具有“固定”位置，它将自己对齐到页面的左上角。
为了使div“填充页面的宽度”，我已经包含了一个“简单的css重置”，包括：
html,body{
margin:0;
padding:0;
}
在我的CSS中
html,
body {
margin: 0;
padding: 0;
}
.rectangle {
height: 65px;
background-color: #67518e;
width: 100%;
}
.section-content {
padding-top: 30px;
padding-bottom: 30px;
border-top: 1px solid green;
border-bottom: 1px solid green;
background-color: yellow;
width: 100%;
}<div class="rectangle">
</div>
<div class="section-content">
</div>
作为旁注：我想强调你对
的使用 min-height: 40px;
这不会被使用，因为您使用的是固定高度。当您使用百分比等作为度量单位时，这种样式才真正发挥作用，而不是px（因为这些不会动态变化）
答案 2 :(得分：0)
您既可以同时制作<div>个<span>，也可以同时制作两个CSS类，添加以下行：display: inline;。