如何使用Z-指数设置DIV和修复CSS

我的蓝事业部被重叠在绿格。（我想有一个绿色事业部则在一旁蓝格）
在Mouseover加载的内容是使蓝格摔倒但是我试着去设置“mydatatoshow”分区将超过 “rightsideblock”使用jQuery z-index财产。

请看看它，让我知道可能的解决方案。

我的工作代码---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
.container{width:999px;} 
.leftsideblock{float:left; border:1px solid green;width:674px;} 
.rightsideblock{border:5px solid blue;} 
</style> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

$('.mydivdata').mouseover(function(){ 
     $('.mydatatoshow').css('z-index', '9999'); 
     $('.mydatatoshow').show(); 
     var mydata = $(this).text(); 
     $('.mydatatoshow').html(mydata);   
    }); 

$('.mydivdata').mouseout(function(){ 
$('.mydatatoshow').hide(); 
}); 


}); 
</script> 

<title>Test To Test</title> 
</head> 
<body> 

<div class="container"> 
    <div class="leftsideblock"> 
    <div class="mydivdata"> 
<table width="650" border="0"> 
<tbody> 
<tr> 
<td width="90" valign="top" rowspan="2" class="myimageclass">&nbsp;</td> 
<td width="193" valign="top">Monday 07 July 2012</td> 
<td width="424"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</td> 
</tr> 
</tbody> 
</table> 
</div> 

    <div class="mydivdata"> 
<table width="650" border="0"> 
<tbody> 
<tr> 
<td width="90" valign="top" rowspan="2" class="myimageclass">&nbsp;</td> 
<td width="193" valign="top">Friday 06 July 2012 8:00AM</td> 
<td width="424"> 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</td> 
</tr> 
</tbody> 
</table> 
</div> 
    </div> 


    <div class="mydatatoshow"> 
    </div> 

    <div class="rightsideblock"> 
    <p> 
    This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data. 
    </p> 
    </div> 

</div> 

</body> 
</html>

来源

2012-07-07 swapnesh

试试这个

<html xmlns="http://www.w3.org/1999/xhtml"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style type="text/css"> 
.container{width:999px;} 
.leftsideblock{float:left; border:1px solid green;width:674px;} 
.rightsideblock{border:5px solid blue;} 
</style> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 


<title>Test To Test</title> 
</head> 
<body> 
    <div class="container"> 
    <table> 
    <tbody><tr> 
    <td> 
     <div class="leftsideblock"> 
      <div class="mydivdata"> 
       <table width="650" border="0"> 
        <tbody> 
        <tr> 
         <td width="90" valign="top" rowspan="2" class="myimageclass">&nbsp;</td> 
         <td width="193" valign="top">Monday 07 July 2012</td> 
         <td width="424"> 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
         </td> 
        </tr> 
        </tbody> 
       </table> 
      </div> 

      <div class="mydivdata"> 
       <table width="650" border="0"> 
       <tbody> 
       <tr> 
        <td width="90" valign="top" rowspan="2" class="myimageclass">&nbsp;</td> 
        <td width="193" valign="top">Friday 06 July 2012 8:00AM</td> 
        <td width="424"> 
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
        </td> 
       </tr> 
       </tbody> 
       </table> 
      </div> 
     </div> 
     </td> 
     <td> 
     <div class="rightsideblock" style="top: 0;position: absolute;width: 300px;float: right;"> 
      <p style="z-index:-1"> 
       This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data. 
      </p> 

     <div class="mydatatoshow" style="top: 0px; left: 0px; z-index: 9999; float: right; position: absolute; display: none; "> 



        &nbsp; 
        Friday 06 July 2012 8:00AM 

         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 




      </div></div> 

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

    <script type="text/javascript"> 
    $(document).ready(function(){ 

    $('.mydivdata').mouseover(function(){ 
      $('.mydatatoshow').css('z-index', '9999'); 
      $('.mydatatoshow').show(); 
     //  document.getElementById('to_hide').style.display='none'; 
      var mydata = $(this).text(); 
      $('.mydatatoshow').html(mydata);   
     }); 

    $('.mydivdata').mouseout(function(){ 
    $('.mydatatoshow').hide(); 
    //document.getElementById('to_hide').style.display='block'; 
    }); 


    }); 
    </script> 


</body></html>

来源

2012-07-07 10:06:08 osyan

谢谢..我想并排绿色和蓝色的div ..当前蓝色的div结束绿色..我想要绿色块，然后蓝色块 – swapnesh 2012-07-07 10:11:10

@swapnesh我编辑绿色div和蓝色div彼此相邻的代码 – osyan 2012-07-07 10:19:09

更多要走30％......剩下的唯一东西现在是“这是右侧边栏数据.....“div数据将隐藏在鼠标悬停效果上，但我希望鼠标悬停在这个div数据上的数据通过z-index ...... plz help – swapnesh 2012-07-07 10:25:54

z-index如果指定类型的位置才有效。

来源

2012-07-07 09:50:38 ratbum

我需要追加然后和WHR ??? – swapnesh 2012-07-07 09:52:27

这取决于你想要发生什么......通常情况下，相对就是你想要的。阅读http://www.w3schools.com/cssref/pr_pos_z-index.asp – ratbum 2012-07-07 09:56:16

我该如何解决这个问题，请提供一个解决方案，因为我希望我已经提到的关注区域下谷歌不提取简单的解决方案作为即时通讯与坏BAD与CSS – swapnesh 2012-07-07 10:01:15

如何使用Z-指数设置DIV和修复CSS

回答

相关问题