固定位置时头部消失

我遇到了一个问题，我一直在搜索几个小时，试图解决问题，但没有成功 - 我疯了。固定位置时头部消失

当我设置位置：固定到我的标题，它消失了，我不知道为什么。任何帮助，将不胜感激。这里是我的CSS：

------- HTML ---------

<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>

-------- --------- CSS -

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; 

    }

感谢提前！ =）

来源

2013-09-28 Niklas

哪些浏览器（和版本）你有问题？你是否也可以使用html（或者你已经分离出来的有问题的部分）？ – Homer6

@ Homer6 Chrome，safari和Firefox。当我悬停流的第一个（左上角）图像时，会出现页面标题和菜单项。但它出现在图像的顶部，浮体被破坏，并且它不会在内容容器顶部之前“需要它自己的空间”...... – Niklas

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

来源

2013-09-30 15:39:53 Homer6

非常感谢！ – Niklas

尝试添加变换方法translateZ（0）;当然，这并不能解决100％浏览器中的问题，但我已经建立了100％的效果。

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

来源

2014-09-18 20:42:50 Neo

固定位置时头部消失

回答

相关问题