绝对定位的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

回答

相关问题