0

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

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

jsFiddle 示例

在 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>
4

1 回答 1

0

问题是因为你有一个position:absolute，#aboutmetoggle他正在寻找他最近的父母，声明放置了一个非绝对位置。这个父母是#container谁position:fixed，因为它在 divs me 和 pic 之下，所以它#aboutmetoggle在所有之下。

三种可能的解决方案：

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

  2. 给z-index容器一个大于 2 的值。

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

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

于 2013-10-28T21:22:42.737 回答