Html z索引在绝对定位的chrome中显示不正确_Html_Css_Google Chrome_Cross Browser

Html z索引在绝对定位的chrome中显示不正确

html css google-chrome

Html z索引在绝对定位的chrome中显示不正确,html,css,google-chrome,cross-browser,Html,Css,Google Chrome,Cross Browser,我在下面粘贴了js fiddle链接，这个问题是#aboutmetoggle div出现在#pic div后面，而#line div出现在#pic前面。我需要一张照片和一条线，以便在后面显示关于切换的信息 <div id="pic"><img src="images/me.jpg" width="100%" height="100%" alt="me" /></div>** <a href="#" name="hiremetoggle" titl

我在下面粘贴了js fiddle链接，这个问题是#aboutmetoggle div出现在#pic div后面，而#line div出现在#pic前面。我需要一张照片和一条线，以便在后面显示关于切换的信息

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

它在IE firefox和safari上看起来很不错，但在chrome上却不行。我已经检查了任何额外的或打开的标签，但看不到任何东西，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>

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

在js小提琴上#line 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>

这个网站要求我将代码放在问题中，所以下面是页面的html，但不管怎么说，它仍处于混乱状态：-）

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

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

**

问题是因为您在

#aboutmetoggle

上有一个

位置：绝对

，而他正在搜索他最近的父母，并声明要放置一个非绝对位置。此父级为

#container

，具有

位置：fixed

，因为它位于divs me和pic下，所以

#aboutmetogle

位于all下

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

三种可能的解决办法：

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

从容器中移除位置：固定的


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

为容器提供大于2的z索引

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

将#aboutmetoggle
放在html结构的其他站点中，他的父节点可以作为主体
  <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>

这一切都取决于你能做什么以及你想做什么，因为你的小提琴帮不了忙。你有没有可能发布一张图片，说明你希望做什么？盒子和线条会很好。嗨，我把容器的位置改成了绝对位置，并减少了#aboutmetoggle的z指数，看起来应该是这样的。非常感谢：-）我想澄清一下，AboutToggle是“我和”pic的孩子，即使z:index更高，如果位置不同，它也不会出现在它们上面？还是因为#aboutmetoggle是绝对的，而他们不是？？谢谢
  <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>