固定位置時頭部消失

我遇到了一個問題，我一直在搜索幾個小時，試圖解決問題，但沒有成功 - 我瘋了。固定位置時頭部消失

當我設置位置：固定到我的標題，它消失了，我不知道爲什麼。任何幫助，將不勝感激。這裏是我的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

固定位置時頭部消失

回答

相關問題