絕對定位的div的Z-index嵌套在一個固定的位置div

我有一個固定的位置div（header），它有一個絕對位置的子div，我希望位於頂部（根據z-index）的一切，但我似乎無法弄清楚如何做到這一點。具有絕對位置的子div的高度大於標題，但沒有延伸。絕對定位的div的Z-index嵌套在一個固定的位置div

The fiddle is here。

<!doctype html> 
<html lang="en"> 
<body> 
    <div class="container"> 
     <div class="header"> 
      <div class="center"> 
       <div id="pgSearch" class="search-box"> 
        <div class="input-results"> 
         <p>this should extend over the red part</p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="content"> 
      <div class="center"> 
       <p>content</p> 

      </div> 
     </div> 
    </div><!--container--> 
</body> 
</html> 

.container { 
    width: 100%; 
    height: 100%; 
    padding-top: 89px; 
    position: relative; 
    z-index:10; 
    background:red; 
} 

.header { 
    position: fixed; 
    height: 89px; 
    display: block; 
    padding: 0 20px; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    overflow-y: hidden; 
    background: green; 
    z-index: 500; 
} 
.search-box { 
    width:300px; 
    float:left; 
    position:relative; 
    z-index:501; 
} 
.search-box .input-results { 
    position: absolute; 
    top:10px; 
    left: 1px; 
    width:300px; 
    height:300px; 
    z-index:9999; 
    background: white; 
}

我要的是白格（輸入結果）是一切的頂部，而是在它被固定在頭DIV結束切斷。

我正在想方設法弄清楚這一點。

來源

2013-01-21 Errol Fitzgerald

一個提示夥伴，而不是定義每個要被規範化的元素使用'* {margin：0;填充：0; }'in css –

@AspiringAqib建議不要使用'*'作爲選擇器。 –

O.o @MrLister謝謝多數民衆贊成爲什麼我想爲什麼所有的網站不使用它。 –

您有：

overflow-y: hidden;

在.header

這意味着，超過.header的高度上的任何內容都將被切斷。如果您不需要它，請移除該屬性

來源

2013-01-21 15:50:46

http://jsfiddle.net/E8Kb2/10/有一個竅門小馬在說什麼的例子。 – Joe

沒錯。與z-index無關。 –

哇。非常感謝 - 不能相信我錯過了！ –

您將.header上的overflow-y設置爲隱藏。這意味着白色區域正在被.header的高度處理。將其更改爲overflow-y：visible;這應該能解決你的問題。

來源

2013-01-21 15:55:21

'visible'是默認值，所以你最好不要忽略它。 – kapa

絕對定位的div的Z-index嵌套在一個固定的位置div

回答

相關問題