关于CSS定位position基础概念总结

一、定位属性一览表

 Tip:定位口诀 —— 子绝父相

边偏移量一览表

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	底部偏移量，定义元素相对于其父元素下边线的距离。
left	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	右侧偏移量，定义元素相对于其父元素右边线的距离

先贴图，方便大家快速的对定位有大致了解，从图中可知使用position,我们可以选择4种不同类型的定位，每一种定位都有四个方向偏移量，下面详解四种定位的使用方式。

二、定位使用方式详解

1）自动定位（默认）

 

 

.static {
            position: static;
            margin: 100px auto;
            left: 50px;
            top: -70px;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

 给这个盒子设置静态定位（static）,首先这个属性是不常用的，因为对静态定位的盒子进行偏移量改变，并不能改变盒子的位置，并且从盒子下面的文字没有层叠在盒子下面位置可以看出，开启静态定位的盒子没有脱离标准流。

2）相对定位

 为了方便理解，设置了两个盒子，蓝色盒子作为参照物，可以看出它们位置在一条垂直线，右边的开发者工具显示现在没有开启相对定位。下图是开启相对定位的效果图：

 从图中，以蓝色盒子作为参照物，可以很明显看出，两个盒子的上下间距变小了，并且粉色盒子往右移动了，这就说明偏移量top和left生效了！盒子位置发生了改变，并且盒子下方文字没有层叠到盒子下方，说明相对定位没有脱离标准流，仍然占据位置。

.relative-1 {
            position: static;
            position: relative;
            left: 50px;
            top: -70px;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
        }

通过代码段可以发现，盒子明明是向右移动了，但是为什么代码是设置的left左偏移量呢？为什么向上移动，top偏移量是负值呢？

这就涉及到相对定位的原理了，它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置），如果觉得参照物不好理解，那就以负值的方式，比如上面代码块的left:50px;和right:-50px是等价的。

2）绝对定位

设置两个盒子，粉色父盒子 和蓝色子盒子都没有开启定位，因为现在都是标准流所以蓝色盒子紧贴盒子左上侧，下面我们给蓝色盒子开启一个绝对定位看一看效果：

 

 .absolute {
            position: absolute;
            left: 200px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

我们发现两个问题：

1.蓝色小盒子为什么移动到粉色父盒子外面了？

2.蓝色小盒子的兄弟文字为什么直接向上占据了原本蓝色小盒子左上侧的位置？

这是因为绝对定位的特性：

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

所以还记得我们的tip口诀吗？"子绝父相"

因为相对定位没有脱离标准流，占据原来的位置，而绝对定位会脱离标准流，且只有最近的标准流能”困“住它，所以网页开发经常使用子绝父相。下面我们给父盒子添加相对定位看看效果图：

.relative-1 {
            position: relative;
            /* left: 50px; */
            right: -50px;
            top: -70px;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
        }
        
        .absolute {
            position: absolute;
            left: 200px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

 效果图可以看出，开启相对定位的粉色父盒子”困“住了蓝色小盒子，并且文字兄弟还是层叠在蓝色小盒子下面，说明绝对定位会脱离标准流，并且层叠性最高，压住下面内容。

3）固定定位

固定效果图p1

 

 

从p1图片可以看出蓝色盒子旁边的文字是1

固定效果图p2

 

 

 从p2图片可以看出滚动条拉到59盒子依旧在这个位置没有变化，固定在这个位置。

 

 

 

  .fixed {
            position: fixed;
            left: 30px;
            height: 200px;
            width: 200px;
            background-color: skyblue;
        }

所以图片中我们可以得出固定图片特性：

1.以浏览器的可视窗口为参照点移动元素。

2.固定定位不再占有原先的位置。

• 跟父元素没有任何关系

• 不随滚动条滚动。

• 固定定位是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

三、定位应用场景总结

position定位应用场景一览表

定位方式	实现方式	应用场景
static	默认布局，按照文档流定位	默认布局;
relative	相对于元素自身正常位置进行定位，元素在文档流中仍占据原来空间，只是表现出来的位置会相对原来的位置偏移；	适用于层叠效果；
absolute	绝对定位，相对于有定位属性的第一个父元素偏移，absolute定位元素会脱离文档流；	适用于小区块的布局使用频繁;
fixed	相对浏览器窗口定位，设置的偏移属性，是相对于浏览器窗口的位置。	适用于广告等意图一直出现在用户眼前的信息。(固定侧边导航栏等)

 四、感谢阅读

不足之处欢迎私信留言指出，友好交流探讨，谢谢！