css(七)之定位

文章目录

• 定位
• 定位组成
• 静态定位
• 相对定位
• 绝对定位
• 固定定位
• 控制盒子前后顺序
• 控制盒子居中

定位

定位可以让盒子自由在某个盒子内移动位置或固定在屏幕中的某个位置。

定位组成

定位=定位模式+边偏移

定位模式：

定位模式由css的position属性控制，分为以下4个

• static:静态定位
• relative:相对定位
• absolute:绝对定位
• fix:固定定位

边偏移：
边偏移就是盒子移动到最终位置。

• top：相对父元素顶端偏移量。
• bottom：相对父元素底端偏移量。
• left：相对父元素左端偏移量。
• right：相对父元素右端偏移量。

静态定位

静态定位就是标准流，很少使用。

相对定位

相对定位是相对于原来位置进行定位的。
语法：

position:relative;

例子:

position:relative;
top:100px;
left:100px;

这个是相对于原来位置向左下角移动一段距离。

注意：原来的位置继续占有，后面的盒子仍然以标准流的形式对待他。

绝对定位

绝对定位移动位置是根据祖先元素来说的。
语法：

position:absolute;

特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
2. 如果祖先元素有定位，那么使用就近原则作为参考点移动位置。(以最近一级有定位的祖先元素作为参考点移动位置)
3. 绝对定位不再占有原先的位置。
4. 口诀:子绝父相，父元素要用相对定位，因为要占有原先的位置，子元素要用绝对定位，可以放在父盒子的任何地方。

固定定位

页面走，但盒子固定不动，就需要固定定位。
语法：

position:fixed;

固定定位也是脱离标准流的。

固定在版心右侧位置

position:fixed;
left:50%;
margin-left:600px;

控制盒子前后顺序

z-index:1;

控制盒子居中

position:absolute;
left:50%;
margin-left:-盒子长度一半px;

来源：CSDN

作者：vegetable exploded

链接：https://blog.csdn.net/qq_38783257/article/details/104057075