Question

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

看起来很好的IE火狐和野生动物园但不是铬。我检查了任何额外的或打开的标签，看不到任何东西，div是绝对定位的，并以正确的顺序显示。任何人都可以帮忙，因为这让我有点难过.....

在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

问题是因为position:absolute上有一个#aboutmetoggle并且他正在搜索他最近的父母，并且声明要放置一个非绝对位置。这位父母#container有position:fixed，因为它位于div和我之下，然后#aboutmetoggle就属于所有人。

三种可能的解决方案：

从容器中删除the position:fixed。
为容器提供比{2}更大的z-index。
将#aboutmetoggle放置在html结构的其他网站中，其父级可以作为正文。

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

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

1 个答案: