重叠div上的Z-index冲突

时间:2011-06-08 11:01:20

标签: css

有点'汗' - 我遇到了Z-index的第一个问题,它只影响FF并且在IE中工作正常。我有2个相互重叠的水平div,两者的宽度几乎都是100%。一个div左侧有一个侧栏,第二个div右侧有一个滚动条。两者都具有相同的Z-index,当我按下IE中的左栏时,它会激活链接,当我按下右侧的滚动条时,它可以正常工作。但在FF - 它不起作用。所以要么我必须在左div上设置更高的索引,然后我将不会访问右边或相反的方向。我需要使用两者而且事情是我无法真正改变div。有什么决议吗?我已经尝试过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>

1 个答案:

答案 0 :(得分:1)

我可以肯定地说,您几乎肯定会遇到问题:您的HTML根本无效。

这一行在不同的浏览器中会做不同的事情:

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

其次,您说的是 z-index问题,但您提供的代码中有 none 。我们如何修复不存在的东西?

你的问题肯定是$posting;没有显示在FF中,但它在IE中。原因很简单:您的#post_table#left_bar#bar_links之后定义为。这就是为什么它出现在的原因。

我不知道您的想法是什么,但我可以确认您使用批次 负数余额将难以管理。现在你定义2个框并移动第三个上/下它们......

这是一个jsFiddle使用你的修正+修改后的代码,在FF和IE中看起来相似。

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