Z-index冲突重叠div

Question

有点'汗' - 我遇到了Z-index的第一个问题，只影响FF，并在IE中正常工作。我有2个水平的div互相重叠，并且几乎占据100％的宽度。在一个div的左侧有一个侧栏，在第二个div的右侧有一个滚动条。两者具有相同的Z-索引，当我在IE的左边栏上按下时，它会激活链接，当我按下右侧的滚动条时，它可以正常工作。但在FF - 它不工作。所以要么我必须在左边div上设置更高的索引，然后我不会访问右边或其他方式。我需要使用两者，事情是我无法真正改变divs。有没有解决这个问题？我试过javascript Z-index转移，但不能顺利运行......谢谢。

#left_bar { 
position: relative; 
margin-top:-112px; 
margin-left:auto; 
margin-right:auto; 


} 

#post_table { // THE SCROLL on the right 
position: relative; 
margin-top:-800px; 
margin-left:auto; 
margin-right:auto; 
padding-left:182px; 
left:-12px; 






} 

#bar_links { 
// THE LINKS on the left 
position: relative; 
margin-left:18px; 
margin-right: auto; 
padding-right:700px; 
width: auto; 
top:180px; 


} 
HTML: 

<div align="center" id="left_bar" style="white-space:nowrap"> 
<img src="images/posting.png"/></div> 
<div align="center" id="bar_links">  
<a href="javascript:;" onmouseout="MM_swapImgRestore();" 
onmouseover="MM_swapImage('images/slices/lipstick1','','images/slices/lipstick2.png',1);"> 
<img name="images/slices/lipstick1"src="images/slices/lipstick1.png" 
width="132" height="56" border="0" id="lipstick" /></a> 
</div> 
<div align="center" id="post_table" style="height: 730px; width:644px; overflow: auto;overflow- x:hidden;"> 
<table width="640" id="table_main"> 
<tr> 
<td>  

<?php 

echo "<table cellspacing='1' cellpadding='1' border='0' width='600' align='center' 
id='inner_table'><tr><td>"; 
    echo "<span style='font-size:11px;color:#dddddd;white-space:nowrap;background- 
image: url(images/branches.png);float:left'>&nbsp;".$post_date."&nbsp;</span>&nbsp;"; 
    echo "</td></tr><br/>"; 
    echo "<tr><td align='left' id='post_style'>"; 
    echo $posting; 
    echo "</tr></td>"; 
    }; ?> 

</td> 
</tr> 
</table> 
</div> 

Answer 1

我可以肯定地说，你几乎肯定会有问题：你的HTML根本无效。

仅此行会做不同的事情在不同的浏览器：

echo "</td></tr><br/>"; 

其次，你谈论一个的z-index问题，但没有在你提供的代码。我们如何解决不存在的问题？

你的问题当然是$posting;不是在FF中显示，而是在IE中。原因很简单：您的#post_table定义为后#left_bar和#bar_links。这就是为什么它们出现下的他们。

我不知道什么是你的想法，但我可以在使用大量底片利润率将是难以管理的确认您。现在你定义2箱和移动第三个过/他们下...

这里有一个jsFiddle使用您有所修正+适应代码，看在FF和IE浏览器类似。

您应该从重新思考布局开始......并学习正确的HTML和CSS。