固定位置时页眉消失 [英] Header is disappearing when the position is fixed
问题描述
当我在标题中设置 position：fixed 时，它消失了，我不知道为什么。这是我的代码：
When I set position:fixed to my header, it disappears, and I cannot figure out why. Here is my code:
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节点设置为固定会从普通文档流中删除它。
Setting a DOM node as fixed removes it from the normal document flow.
您应该使用以下CSS来设置标头设置为固定高度，并使用与内容容器填充相同的高度（因为它不会将内容容器向下推，因为已将其从正常文档流中删除）。请注意，在此示例中，两者都为20px。
You should use the following CSS to set the header to a fixed height and use that same height as the padding for the content-container (because it won't push the content-container down because it has been removed from normal document flow). Notice both have 20px in this example.
#header {
position: fixed;
background-color: red;
width: 100%;
height: 20px;
z-index: 10;
}
.content-container {
padding-top: 20px;
}
有关完整的有效示例，请参见jsfiddle： http://jsfiddle.net/x8vbs/
See the jsfiddle for a complete, working example: http://jsfiddle.net/x8vbs/
这篇关于固定位置时页眉消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
