javascript - 如何使用 Z-index 设置 div 并修复 css

Question

关注的区域 -

我的蓝色 div 与绿色 div 重叠。（我想要一个绿色的 Div 然后在蓝色的 Div 旁边）
在加载的内容上，蓝色的 div 会掉下来，但是我试图使用 jquery属性Mouseover将“mydatatoshow”div 设置为“rightsideblock” 。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>

score 1 · Accepted Answer

1

z-index仅在您指定位置类型时才有效。

于 2012-07-07T09:50:38.863 回答

score 1 · Accepted Answer

试试这个

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

javascript - 如何使用 Z-index 设置 div 并修复 css

2 回答 2

Related

Reference