CSS几种定位方式以及定位的叠放次序z-index，绝对定位的盒子居中算法，定位的特殊特性

CSS几种定位方式以及定位的叠放次序z-index，绝对定位的盒子居中算法，定位的特殊特性

边偏移

top、left、right、bottom属性可以偏移定位

静态定位「默认」

静态定位是元素的默认定位方式，🈚️定位的意思。

• 静态定位按照标准流特性摆放位置，它没有边偏移
• 静态定位在布局时很少用到

相对定位「relative」

• 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
• 📌 原来在标准流的位置继续占有（不脱标）

绝对定位「absolute」

• 如果没有祖先元素「父元素」，或者祖先元素没有定位，则以浏览器为准定位（Document定位）
• 如果祖先元素有定位（绝对，相对，固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
• ⚠️ 绝对定位不再占有原先的位置（脱标）

什么是「子绝父相」

子绝父相是定位中最常用的一种方式，意思是：子级是绝对定位的话，父级要用相对定位

• 子级绝对定位，不会占有位置，可以放到父盒子里面任何一个地方，不会影响其他的兄弟盒子。
• 父盒子需要➕定位限制🚫子盒子在父盒子内显示
• 父盒子布局时，需要占🈶️位置，因此父亲只能是绝对定位

固定定位 🧷 「fixed」

固定定位是元素固定在浏览器可视区的位置，可以在浏览器滚动页面时元素的位置不会改变。

• 以浏览器可视窗口为参照点移动元素
• 和父元素没有任何关系
• 不随滚动条滚动
• 固定定位不再占有原来的位置（脱标）

粘性定位「sticky」

视频案例地址：https://www.bilibili.com/video/BV14J4114768?p=232

• 以浏览器可视窗口为参照点移动元素
• 粘性定位占有原先的位置（相对定位的特点）
• 必须添加top，left，right，bottom其中一个才有效

市面上看起来像黏性定位的效果多用JS实现，因为这个效果兼容性比较差。

z-index

当盒子出现叠放时，可以用z-index来决定盒子的前后次序

• 数值可以是正数，负数和0，默认是auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序✍️，后来者具上
• 数字后面不能➕单位
• 只有定位的盒子才有z-index属性

绝对定位的盒子居中算法

加了绝对定位的盒子不能通过margin: 0 auto来居中

1. left走50%
   

2. margin负值往左边走自己盒子宽度的一半⬅️
   

定位的特殊性

• 行内元素添加绝对或者固定定位🧷（两种都脱标），可以直接设置高度和宽度
• 块级元素添加绝对或固定定位🧷，如果不给宽度和高度，默认大小是内容的大小
• 脱标盒子不会出现外边距塌陷：浮动元素，绝对定位，固定定位🧷元素都不会触发外边距合并问题
• 绝对定位（固定定位🧷）会完全压住盒子

浮动元素就不同，只会压住下面标准流的盒子，但不会压住下面标准流盒子里面的文字（图片）
但绝对定位（固定定位🧷）会压住下面标准流的所有内容