CSS定位—position：absolute

position：absolute

　　绝对定位

　　脱离文档流，原有位置空间被释放。容器（父）元素将得不到脱离普通流的子元素的高度

　　不管是块级元素还是行内元素，应用了position:absolute之后，display为block，可以设置width和height，没有设置的话，width默认为auto

1、父元素或祖元素没有设置position：absolute、relative

　　此种情况下，相对浏览器进行定位偏移

 1     <div class="1" style="background-color:yellow;border:1px solid red;margin-left:50px;">
 2         这里是祖元素的开头
 3         <div class="2" style="background-color:blue;border:1px solid red;margin-left:20px;">
 4             这里是父元素的开头。
 5             <div class="3" style="background-color:green;border:1px solid red;margin-left:20px;">
 6                 这里是子元素。
 7             </div>
 8             这里是父元素的结尾
 9         </div>
10         这里是祖元素的结尾。
11     </div>

对父元素设置position：absolute，不设置top、right、bottom、left— —默认浮动，默认浮动在父级节点的content-box区，即原有位置保持不变，只是脱离文档流释放位置空间

1 <div class="1" style="background-color:blue;border:1px solid red;margin-left:20px;position: absolute;">

对父元素设置position：absolute，设置top、right、bottom、left— —相对于浏览器进行偏移

<div class="1" style="background-color:blue;border:1px solid red;margin-left:20px;position: absolute;left:100px;top:50px;">

2、父元素或祖元素设置position：absolute、relative

　　此种情况下，则相对于最近的设置了position：absolute、relative的父元素或祖元素进行偏移

    <div class="1" style="background-color:yellow;border:1px solid red;margin-left:50px;padding-top:30px;position:relative;">
        这是祖元素开始的地方
        <div class="1" style="background-color:blue;border:1px solid red;margin-left:20px;position: absolute;left:100px;top:50px;">

 

转载于:https://www.cnblogs.com/zc13/p/9377653.html