绝对定位position: absolute;

最新推荐文章于 2024-03-18 17:20:19 发布

weixin_30527551

最新推荐文章于 2024-03-18 17:20:19 发布

阅读量137

点赞数

原文链接：http://www.cnblogs.com/AndyChen2015/p/7650400.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
         position: absolute;
         相配合使用的属性分别有：
            定位属性：left、right、top、bottom
            堆叠顺序属性：z-index
          定位属性是用来定位元素的位置的，四个方向可以设置位置；
          堆叠顺序属性用来定义如果多个含有position属性的元素的堆叠顺序。
         参照浏览器左上角，配合 top left right bottom（TLRB）进行定位，
         1、在没有设定TLRB,默认依据父级的坐标原点为起始点
         2、如果设定了TLRB,并且父级没有设定position属性，
            那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定
         3、如果设定了TLRB,并且父级设定position属性，
            那么当前的absolute则以父级元素的左上角为原始点进行定位，位置将由TRBL决定

　　　　　
          如果子元素没有设置TLRB,默认以及父级的坐标原点为起始点。
          如果设定了TRLB，父级元素有定义position属性，则absolute的（0,0）位置在父级元素的左上角位置，位置由定位属性(TLRB)决定；
          如果设定了TRLB，父级元素没有定义position属性，则absolute的（0,0）位置在浏览器的右上角位置，位置由定位属性(TLRB)决定。
          所以谁absolute有随机性的，大多是因为没有注意到父级元素是否也定义过position属性
          
          fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。*/
        #parent{
            position: absolute;
            height: 200px;
            width:200px;
            border: 4px solid red;
            background-color: #4cae4c;
            margin-top:100px;
            margin-left:100px;

        }

        #children{
            position: absolute;
            height: 20px;
            width:60px;
            border: 4px solid blue;
            background-color: #761c19;
            top:10px;
            left: 50px;
        }
    </style>
</head>
<body style="margin: 0;padding: 0;background-color: gray">
<div id = 'parent'>
    <div id="children">

    </div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/AndyChen2015/p/7650400.html