z-index 不会将下拉 HTML 放在顶部答案

【问题标题】：z-index doesn't put dropdown HTML on topz-index 不会将下拉 HTML 放在顶部
【发布时间】：2014-06-04 10:24:02
【问题描述】：

我需要帮助让下拉菜单在顶部展开。我在上面放了z-index，但出于某种原因，我想理解它与其他部分的融合。当“输入您的地区”on my site 33hotels.com 中的一种类型时，下拉菜单会展开。

很抱歉没有发布代码，但主要问题是我不知道它的哪个部分导致了这种效果。

谢谢！

编辑。原来设置position: absolute 而不是fixed 解决了这个问题！同样奇怪的是，这只是 Chrome 和 Safari 的问题，而不是 Firefox！

【问题讨论】：

如果可能的话，给出绝对位置
如果你想让你的下拉列表位于顶部，则 z-index 值高于其他
@ketan 令人惊讶的是，当我用绝对替换固定时它起作用了！知道为什么吗？

标签： html css drop-down-menu z-index transparency

【解决方案1】：

将 z-index 属性添加到 #location-search 元素。您可以将其设置为 1。

#location-search {
    position: fixed;
    z-index: 1;
    top: 45px;
    margin: 0 5px;
}

请记住，z-index 仅适用于兄弟元素 - 具有相同父元素的元素。这意味着，如果您在同一个父级中有两个非静态定位元素，您可以使用 z-index 将它们放置在它们的父级中。但只要他们有不同的父母 - 你只能用他们的父母来统治。

<div id="Wrapper">
    <div id="Test1">blue</div>
    <div id="Test2">red</div>
</div>

div { position: absolute; }
#Test1 { background: blue; z-index: 10; }
#Test2 { background: red; z-index: 9; }
/* blue is over red, though declared earlier */

但是

<div id="Wrapper">
    <div id="InnerWrapper">
        <div id="Test1">blue</div>
    </div>
    <div id="Test2">red</div>
</div>

div { position: absolute; }
#InnerWrapper { z-index: 10; }
#Test1 { background: blue; z-index: 15; }
#Test2 { background: red; z-index: 11; }
/* red is over blue, for blue's wrapper has no z-index or lower */

【讨论】：

我忘了为内部包装元素声明 z-index，抱歉。

【解决方案2】：

在此 css 中将 z-index 设置为 -1，因为您的 dropdown-menu 类具有 -z-index 或 1000，因此您需要将主要内容设置在自动完成下拉列表后面。

#row-content {
  position: fixed;
  top: 85px;
  bottom: 0;
  width: 100%;
  z-index: -1;
}

【讨论】：

为什么是-1？默认设置（没有z-index）不是已经把它放在1000下面了吗？

【解决方案3】：

还要记住设置元素位置，因为 z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

【讨论】：