当我将 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/