z-index在絕對定位的Chrome中沒有正確顯示

Question

我在下面粘貼了js小提琴鏈接，這個問題是#aboutmetoggle div出現在#pic div後面，並且#line div在#pic前面顯示。我需要#pic和#line在#aboutmetoggle後面顯示。

它看起來很好的IE瀏覽器Firefox和safari，但不是在鉻。我檢查了任何額外或開放的標籤，看不到任何東西，並且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> 

Answer 1

的問題是因爲你對#aboutmetoggle一個position:absolute，他正在尋找他的聲明被置於一個非絕對位置最接近的父母。這位父母是#container誰擁有position:fixed，因爲它是在div和我之下，所以#aboutmetoggle就在其中。

三種可能的解決方案：

1. 從容器中取出the position:fixed。

2. 給容器一個z-index大於2。

3. 將#aboutmetoggle放在您的html結構的其他位置，其父母可以是其身體。

一切都取決於你可以做什麼，你想做什麼，因爲你的小提琴沒有幫助。