• 绝对定位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>
      
    

      

  • 相关阅读:
    A1141. PAT Ranking of Institutions
    A1140. Look-and-say Sequence
    A1139. First Contact
    A1138. Postorder Traversal
    A1137. Final Grading
    A1136. Delayed Palindrome
    A1135. Is It A Red-Black Tree
    A1134. Vertex Cover
    A1133. Splitting A Linked List
    layer.open打开iframe页面的调用父页面方法及关闭
  • 原文地址:https://www.cnblogs.com/AndyChen2015/p/7650400.html
Copyright © 2020-2023  润新知