简体   繁体   English

固定位置时页眉消失

[英]Header is disappearing when the position is fixed

When I set position:fixed to my header, it disappears, and I cannot figure out why. 当我将position:fixed设置到我的标题时,它消失了,我不知道为什么。 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> 

Setting a DOM node as fixed removes it from the normal document flow. 将DOM节点设置为固定节点会将其从常规文档流中删除。

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). 您应该使用以下CSS将标头设置为固定高度,并使用与内容容器的填充相同的高度(因为它不会将内容容器向下推,因为已将其从正常文档流中删除)。 Notice both have 20px in this example. 请注意,在此示例中,两者的像素均为20px。

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

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

See the jsfiddle for a complete, working example: http://jsfiddle.net/x8vbs/ 有关完整的工作示例,请参见jsfiddle: http : //jsfiddle.net/x8vbs/

Try adding the transform method translateZ(0); 尝试添加转换方法translateZ(0); , ofcourse this does not fix the issue accross 100% of the browsers, but I've founded it to be 100% effective. ,当然这不能解决100%浏览器中的问题,但我发现它可以100%有效。

#header {
    position: fixed;
    background-color: red;
    width: 100%;
    height: 20px;
    z-index: 10;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM