CSS中定位的介绍及使用

静态定位：

静态定位是默认值，就是之前认识的标准流。
代码：postion:static
静态定位不能通过方向偏移值来改变。

相对定位：

自恋型定位，相对于自己之前的位置进行移动。
代码：postion:relative

1. 需要配合访问属性来移动
2. 相对于自己原来的位置进行移动
3. 在页面中占位置→没有脱标

应用场景 ：配合绝对定位组cp（子绝父相），用于小范围的移动。

绝对定位：

拼爹型定位，相对于非静态定位的父元素进行移动。

代码：position:absolute

1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置→已经脱标

应用场景 ：配合相对定位组CP（子绝父相）

绝对定位相对于谁移动？

1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
2. 祖先元素中有定位 → 相对于最近的 有定位 的祖先元素进行移动

固定定位：

相对于浏览器窗口进行定位，脱离原来的文档流。

代码：position:fixed

子绝父相

含义： 子元素用绝对定位，父元素用相对定位。

应用场景： 让子元素相对于父元素进行自由移动。

好处： 父元素是相对定位，对网页布局影响最小。

子绝父绝特殊场景：

场景： 在使用子绝父相的时候，发现父元素已经有相对定位了，此时直接子绝即可！

原因： 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局。

设置偏移值：水平和垂直就近各取一个

水平方向：

• left：数字+px 距离左边的距离
• right：数字+px 距离右边的距离

垂直方向：

• top：数字+px 距离上边的距离
• bottom：数字+px 距离下边的距离

基本写法：

.blue {
            /* 设置定位方式 */
            position: absolute;
            top: 150px;
            left: 150px;
            background-color: blue;
        }