z-index 在绝对定位的 chrome 中没有正确显示

Question

我在下面粘贴了js小提琴链接，这个问题是#aboutmetoggle div出现在#pic div后面，而#line div显示在#pic前面。我需要#pic 和#line 显示在#aboutmetoggle 后面。

IE firefox 和 safari 看起来不错，但在 chrome 中不行。我检查了任何额外的或打开的标签，但看不到任何东西，而且 div 绝对定位并以正确的顺序出现。谁能帮忙，因为这让我有点难过.....

jsFiddle example

在 js fiddle 中，#line div 显得太过分了。显然这段代码搞砸了...... :-(

这个网站要求我在问题中放置代码，所以下面是页面的 html，但无论如何它都在小提琴中 :-)

<div id="container"><div id="banner"><h1><img src="images/banner.png" width="432" height="64" alt="front end web designer" /></h1>
</div>

  <div id="pic"><img src="images/me.jpg" width="100%" height="100%" alt="me" /></div>**


<a href="#" name="hiremetoggle" title="Hire me" id="hiremetoggle">
    <img src="images/hire.png"  alt="Hire me " border="0"/></a></div>

    <a href="#" name="prevtoggle" title="Previous work" id="prevtoggle"><img src="images/work.png" alt="Previous work" border="0"/>
    </a></div>


<div id="line"></div>




<div id="prevcontent">

<div class="img-wrap"><img src="images/example2.png" alt="Dr Martens fan site" /> <div class="img-info"><a href="http://www.webdesignerlhm.co.uk/drmartensfansite" target="_blank"><h2><br />Dr Martens Fansite</h2> </a></div></div>
<div id="block"> </div>

<div class="img-wrap2"><img src="images/example1.png" width="165" height="165" alt="Rainbow Feet holistic therapy college project e-commerce site" /> 
  <div class="img-info"><a href="http://www.webdesignerlhm.co.uk/rainbowfeet/holistic.html" target="_blank"><h2><br />Rainbow Feet</h2> a college project website</h2> </a></div></div>





<div id="blockrow"></div>



<div class="img-wrap4"><img src="images/example3.png"  width="230" height="165
" alt="Band style website" border="0"/><div class="img-info4"><a href="http://www.webdesignerlhm.co.uk/bandsite/" target="_blank"><h2><br />Band template website</h2></a></div></div>
<div class="img-wrap3"><img src="images/Misfestwebsite.jpg" width="258" height="165" /><div class="img-info3"><a href="http://www.misfest.co.uk" target="_blank"><h2><br/><br/>Misfest festival website</h2></a></div></div> 
<div id="rowblock" ></div><div id="rowblock"></div><div id="rowblock"></div>
</div>

Answer 1

问题是因为您在#aboutmetoggle 上有一个position:absolute，并且他正在寻找他最近的父母，并且声明了一个非绝对位置。这个父母是#container，他有position:fixed，因为它在我和图片的div下面，所以#aboutmetoggle在下面。

三种可能的解决方案：

1. 从容器中删除the position:fixed。

2. 为容器提供大于 2 的 z-index。

3. 将#aboutmetoggle 放置在您的html 结构的其他站点中，他的父级可以是正文。

一切都取决于你能做什么以及你想做什么，因为你的小提琴没有帮助。