绝对定位块的 Z-Index答案

【问题标题】：Z-Index for an absolute positioned block绝对定位块的 Z-Index
【发布时间】：2013-02-09 13:26:18
【问题描述】：

我以这种方式创建了一个所谓的“下拉”列表：

HTML：

<span><img src="images/searchall.png" alt=""/>
  <ul>
    <li>WORKSPACES</li>
    <li>REPORTS</li>
    <li>PEOPLE</li>
    <li>COMMENTS</li>
    <li>ANNOTATIONS</li>
  </ul>
</span>

CSS：

span {position:relative;}
span ul {position:absolute; display:none;}
span:hover > ul {display:block;}

我的问题是 ul 应该出现在 span:hover 的 img 元素下的 span 中。我已经尝试为所有元素设置索引，但它根本不起作用。

我该怎么办？

P.S.：我知道ul 在span 中存在一些标记问题。别担心。我会修复的。图形问题目前更重要！谢谢

【问题讨论】：

我没有问题。 dabblet.com/gist/5022942也许是你的浏览器
正是你所拥有的似乎完美地工作......jsfiddle.net/XLzmc
先尝试将span改为div

标签： css position z-index absolute

【解决方案1】：

使用这个 CSS 文件：

span {position:relative;}
span ul {position:absolute; min-height:20px;}
span ul li {display:none;}
ul:hover > li {display:block;}

总是取代ul来控制li

【讨论】：

好吧，还是不行。 :(i.minus.com/ib2DUlorojZFdz.png，我必须得到这样的东西！

【解决方案2】：

span ul { z-index: 100; }
span:hover img { z-index: 101; }

【讨论】：

【解决方案3】：

看看这是否如你所愿：

span {float:left; width:200px;}
span img{float:left; width:200px;}
span ul {float:left; display:none;}
span:hover > ul {display:block;}

您应该浮动所有块元素并定义它们的大小，以便盒子可以垂直分配。

【讨论】：

【解决方案4】：

看来你只考虑IE7+。如果你想要img下的ul，你应该给img一个大于ul的z-index的z-index，但是请考虑img下的ul的一些内容是不可见的。 jsfiddle.net/XLzmc/1/

【讨论】：

我终于想通了。这个 + {position: relative} 为 img 元素做了这件事。
是的，设置 position:relative|absolute|fixed 和 z-index，默认值 position:static，z-index 无效。