同级、父子级div定位

最新推荐文章于 2022-07-11 10:17:00 发布

weixin_34129696

最新推荐文章于 2022-07-11 10:17:00 发布

阅读量547

点赞数

文章标签：前端 python xhtml ViewUI

以两个div右上角对齐为例：

效果图：

1.同级定位

<!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" />
        <title>同级</title>        
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            .main {
                position: relative; 
                width:1000px;
                height:600px;
                background: gray;
            }
            .div_01 {
                position: absolute;
                top: 0;                
                right: 0; 
                width: 600px;
                height: 400px;
                z-index: 1;
                background: yellow;
            }
            .div_02 {
                position: absolute;
                top: 0;                
                right: 0;
                width: 200px;
                height: 100px;
                z-index: 2;
                background: green;
                }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="div_01">
                div_01
            </div>
            <div class="div_02">
                div_02
            </div>
        </div>    
    </body>
</html>

2.父子级定位

<!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" />
        <title>嵌套</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            .div_01 {
                position: relative; 
                width:600px;
                height:400px;
                background: yellow;
            }
            .div_02 {
                position:absolute;
                top: 0;                
                right: 0;
                width:200px;
                height:100px;
                background: green;
                }
        </style>        
    </head>
    <body>
        <div class="div_01">
            <div class="div_02">
                div_02
            </div>
        </div>
    </body>
</html>