您现在的位置: 365建站网 > 365学习 > 关于同辈元素定位方式与z-index的总结

关于同辈元素定位方式与z-index的总结

文章来源:365jz.com     点击数:472    更新时间:2009-12-20 00:24   参与评论
<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>同辈元素定位方式相同,且无z-index设置时,html靠后者居上。</title>
    </head>
    <style type="text/CSS">
        div { font:12px/1.5 arial;}
        div strong { color:#fff; background:#036; display:inline-block;}
        h3 strong { color:#f00;}
        /*--- 定义方块外形 ---*/
        .div1,
        .div2 {
            height:70px;
            width:150px;
            background:#cff;
            border:1px solid #036;
        }
        .div2 {
            margin-top:-20px;
            margin-left:75px;
            padding-top:30px;
            height:40px;
        }
        td{ height:200px; width:350px; border:solid 1px #C69;}
    </style>
    <body>
        <h3>
        法则一:同辈元素各种情况比较<br />公共样式:<br />
        <span style="color:#F6C">
        .div1,<br />
        .div2 {<br />
            height:70px;<br />
            width:150px;<br />
            background:#cff;<br />
            border:1px solid #036;<br />
        }<br />
        .div2 {<br />
            margin-top:-20px;<br />
            margin-left:75px;<br />
            padding-top:30px;<br />
            height:40px;<br />
        }<br />
        </span>
        </h3>
        <table cellpadding="1" cellspacing="0" border="0">
            <tr>
                <td>
                    <div class="div1">.div1{position:static;}</div>
                    <div class="div2">.div2{position.static;}</div>
                </td>
                <td>
                    <div class="div1" style=" z-index:2;">.div1{position:static; z-index:2;}</div>
                    <div class="div2" style=" z-index:1;">.div2{position:static; z-index:1;}</div>
                </td>
                <td>结论:同为静态定位,html靠后者居上,并且如果有z-index也无效;当然,如果静态定位遇到动态定位,也肯定是要逊色而居下的。</td>
            </tr>
            <tr>
                <td>
                    <div class="div1" style="position:relative;">.div1{position:relative}</div>
                    <div class="div2" style="position:relative;">.div2{position:relative}</div>
                </td>
                <td>
                    <div class="div1" style="position:relative; z-index:2">.div1{position:relative; z-index:2}</div>
                    <div class="div2" style="position:relative; z-index:1">.div2{position:relative; z-index:1}</div>
                </td>
                <td>结论:同为动态relative定位时,如果没有z-index,则html靠后者居上,如果有z-index,则数值大者居上</td>
            </tr>
            <tr>
                <td>
                    <div class="div1" style="position:absolute;">.div1{position.absolute}</div>
                    <div class="div2" style="position:absolute;">.div2{position.absolute}</div>
                </td>
                <td>
                    <div class="div1" style="position:absolute; z-index:2">.div1{position:absolute; z-index:2}</div>
                    <div class="div2" style="position:absolute; z-index:1">.div2{position:absolute; z-index:1}</div>
                </td>
                <td>结论:同为动态absolute定位时,如果没有z-index,则html靠后者居上,如果有z-index,则数值大者居上</td>
            </tr>
            <tr>
                <td>
                    <div class="div1" style="position:relative;">.div1{position.relative}</div>
                    <div class="div2" style="position:absolute;">.div2{position.absolute}</div>
                </td>
                <td>
                    <div class="div1" style="position:relative; z-index:2">.div1{position:relative; z-index:2}</div>
                    <div class="div2" style="position:absolute; z-index:1">.div2{position:absolute; z-index:1}</div>
                </td>
                <td>结论:同为动态定位时,如果没有z-index,则html靠后者居上,如果有z-index,则数值大者居上</td>
            </tr>
            <tr>
                <td>
                    <div class="div1" style="position:absolute; zoom:1;">.div1{position.absolute}</div>
                    <div class="div2" style="position:relative; zoom:1;">.div2{position.relative}</div>
                </td>
                <td>
                    <div class="div1" style="position:absolute; z-index:2; zoom:1;">.div1{position:absolute; z-index:2}</div>
                    <div class="div2" style="position:relative; z-index:1; zoom:1;">.div2{position:relative; z-index:1}</div>
                </td>
                <td>结论:同为动态定位时,如果没有z-index,则html靠后者居上,如果有z-index,则数值大者居上</td>
            </tr>
        </table>
</body>
</html>

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (472人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------