CSS定位

Posted 2022-07-05 一杯清泉

一、相对定位 

        不脱离标准流

position: relative;

        相对自己原来的位置移动，形影分离，本质上真实的位置还在原来的位置，设置margin还是原来位置的margin，移动后的位置是其影子，视觉效果上是移动了。

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.box1 
    height: 150px;
    width: 150px;
    background: #61dafb;


.box2 
    position: relative;
    height: 150px;
    width: 150px;
    background: orange;
    margin-top: 50px;
    left: 100px;


.box3 
    height: 150px;
    width: 150px;
    background: dodgerblue;
    margin-top: 20px;

1、相对定位有压盖效果，一般不用作『压盖效果』，作用就两个：

• 微调元素
• 绝对定位参考，子绝父相

2、定位：

• 可以使用left/right来描述盒子右左的移动；
• 可以用top/bottom来描述盒子的下上的移动；

二、绝对定位

        脱离标准流

position: absolute;

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.box1 
    height: 150px;
    width: 150px;
    background: #61dafb;


.box2 
    position: absolute;
    height: 150px;
    width: 150px;
    top: 0;
    background: orange;


.box3 
    height: 150px;
    width: 150px;
    background: dodgerblue;
    margin-top: 20px;

 1、绝对定位和原来的自己的位置没有任何关系

• 绝对定位脱离标准流，所有标准文档流性质在绝对定位后都不生效了
• 绝对定位之后，就不区分行内元素、块级元素，直接可设置宽高
   

2、定位

• 绝对定位的参考点如果使用top描述，定位的参考点就是页面左上角，而不是浏览器左上角，页面滑动，也跟着滑动。
• 绝对定位的参考点如果使用bottom描述，那么就是浏览器首屏窗口尺寸，对应页面的左下角，浏览器底部缩小，也跟着向上移动。

3、子绝父相

        儿子绝对定位，父亲相对定位：

        儿子设置绝对定位，儿子就跑到父div里面去了。否则会在父布局外面，如果有多个父布局设置相对定位，则以最近的的父布局为参考，例如：

4、不一定是相对定位，任何定位，都可以作为参考点

        子绝父绝： 

        子绝父相、子绝父绝、子绝父固都可以给儿子定位，但是工程上子绝父绝。没有一个盒子在标准文档流里面，所以页面就不稳固，没有任何实战用途，工程上『子绝父相』有意义，父亲没有脱标准，儿子脱标在父亲的范围里面移动。

5、绝对定位居中

        绝对定位脱离标准流，margin:0 auto；失效，居中需要： 

div 
    position: absolute;
    height: 50px;
    width: 1000px;
    background: orange;
    left: 50%;
    margin-left: -500px;
    top: 0;

• left: 50%;表示位于左边线居中。
• margin-left: -500px;再拉回一半的自己。

这样就居中了。

三、固定定位

        脱离标准流

position: fixed;

固定在页面，不跟随页面滚动变化，通常用来做顶部通栏的条，回到顶部，广告！

总结：

相对定位	不脱离标准流
绝对定位	脱离标准流
固定定位	脱离标准流