gpt4 book ai didi

html - 固定位置后标题消失

转载 作者:行者123 更新时间:2023-11-27 22:29:39 25 4
gpt4 key购买 nike

当我将 position:fixed 设置到我的标题时,它消失了,我不明白为什么。这是我的代码:

html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

#header {
position: fixed;
}

#header-title {
float: left;
}

#header-navigation {
float: right;
}

.content-container {
width: 100%;
columns: 3;
-webkit-columns: 3;
/* Safari and Chrome */
-moz-columns: 3;
/* Firefox */
column-gap: 0px;
-moz-column-gap: 0px;
-webkit-column-gap: 0px;
column-fill: balance|auto;
}

.post {
display: block;
position: relative;
}

.post img {
width: 100%;
height: auto;
display: block;
}

.post h2 {
position: absolute;
display: none;
top: 50%;
text-align: center;
margin: 0 auto;
width: 100%;
color: #000;
font-family: 'Raleway', sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
}

.post:hover img {
opacity: 0.15;
}

.post:hover h2 {
display: block;
}
<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="header">

<div id="header-title">
TITLE
</div>

<div id="header-navigation">
MENU
</div>
</div>

<div class="content-container">

<div class="post">
<img src="1.jpeg">

<h2 class="post">
Hello
</h2>

</div>

<div class="post">
<img src="1.jpeg">

<h2 class="post">
Hello
</h2>
</div>

<div class="post">
<img src="1.jpeg">

<h2 class="post">
Hello
</h2>
</div>

</div>

</body>

</html>

最佳答案

将 DOM 节点设置为固定节点会将其从正常文档流中移除。

您应该使用以下 CSS 将标题设置为固定高度,并使用与内容容器的填充相同的高度(因为它不会将内容容器向下推,因为它已从普通文档中删除流动)。请注意,在此示例中两者都有 20px。

#header {
position: fixed;
background-color: red;
width: 100%;
height: 20px;
z-index: 10;
}

.content-container {
padding-top: 20px;
}

有关完整的工作示例,请参阅 jsfiddle:http://jsfiddle.net/x8vbs/

关于html - 固定位置后标题消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19070793/

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