gpt4 book ai didi

html - Div 元素未正确定位

转载 作者:行者123 更新时间:2023-11-28 15:54:18 25 4
gpt4 key购买 nike

我正在使用 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>

最佳答案

发生这种情况是因为您正在对类为 .rectangle 的元素使用 position: fixed。一种不改变位置的解决方案是对元素 .section-content 使用 margin-top: 59px:

.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关于职位。

关于html - Div 元素未正确定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27778648/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com