• 绝对定位position: absolute;


    <!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;
                200px;
                border: 4px solid red;
                background-color: #4cae4c;
                margin-top:100px;
                margin-left:100px;
    
            }
    
            #children{
                position: absolute;
                height: 20px;
                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>
      
    

      

  • 相关阅读:
    新型肺炎实时动态
    大学排名数据爬取
    python BeautifulSoup基本用法
    爬虫爬取
    人口普查系统--信息查找
    人口普查系统--信息删除
    人口普查系统--信息修改
    人口普查系统--信息登记
    期中考试题目
    期中考试前准备--数据库查找代码
  • 原文地址:https://www.cnblogs.com/AndyChen2015/p/7650400.html
Copyright © 2020-2023  润新知