html - Z-index在绝对定位的chrome中无法正确显示

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

IE Firefox和Safari似乎不错，但Chrome则不行。我检查了任何额外的或打开的标签，看不到任何东西，并且div的位置绝对正确，并以正确的顺序显示。任何人都可以帮忙，因为这让我有些困惑。

jsFiddle example

在js小提琴上，＃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>

最佳答案

问题是因为您在position:absolute上有一个#aboutmetoggle并且他正在搜索其最接近的父级，并声明要放置一个非绝对位置。这个父母是拥有#container的position:fixed，因为它在divs我和pic的下面，所以#aboutmetoggle在所有的下面。

三种可能的解决方案：


从容器中取出the position:fixed。
容器的z-index大于2。
将#aboutmetoggle放在您的html结构的其他站点中，他的父母可以成为其正文。


一切都取决于您可以做什么以及您想做什么，因为您的Fiddle并没有帮助。