gpt4 book ai didi

css - 强制绝对定位的 div 不重叠

转载 作者:行者123 更新时间:2023-11-28 18:56:47 24 4
gpt4 key购买 nike

我有一个使用 position:absolute; 定位的 header 栏,我似乎无法让它与我的内容重叠。

enter image description here

这是我在示例中使用的 html:

<div class="ui-page ui-page-active">
<div class="ui-header">
<div class="ui-title ui-title-h1">
Page Title 1
</div>
</div>
<div class="ui-content">
<a href="#pg-two">Page Two</a>
</div>
<div class="ui-footer">
<div class="ui-title ui-title-h3">
Page Footer 1
</div>
</div>
</div>

这是我的CSS

html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.ui-page {
background-color: #bbb;
height: 100%;
width: 100%;
display: block;
position: relative;
}
.ui-page-inactive {
display: none;
}
.ui-page-active {
display: block;
}
.ui-header {
position: absolute;
top: 0;
background-color: #000;
width: 100%;
display: inline-block;
}
.ui-content {

}
.ui-footer {
position: absolute;
bottom: 0;
background-color: #000;
width: 100%;
display: inline-block;
}
.ui-title {
text-align: center;
color: #fff;
padding: 4px;
line-height: 150%;
}
.ui-title-h1 {
font-size: 1.5em;
font-weight: 900;
}

我的最终目标是让页眉栏始终位于顶部,页脚栏始终位于底部,内容填充中心。内容 div 实际上 不需要填充 100%,我只是不希望它被页眉或页脚挡住。

最佳答案

一种简单的方法是将 .ui-content 上的 padding-top 或 margin-top(我不确定是哪个)设置为标题的高度,这会将 .ui-content 向下推,因此没有'重叠。

关于css - 强制绝对定位的 div 不重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7588233/

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