CSS 静态定位、相对定位、绝对定位、固定定位、粘性定位、定位的叠放次序以及定位的拓展

定位简介

• 定义：将盒子定在某一个位置。
• 作用：定位可以让盒子自由在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以按住其他盒子。
• 定位= 定位模式 + 边偏移。其中，定位模式用于指定一个元素在文档中的定位方式。边偏移则决定该元素的最终位置。

1. 定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其属性值取值见下表：

属性值	说明
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

2. 边偏移

边偏移就是定位的盒子移动到的最终位置，它有top、bottom、left、right 4个属性，具体说明见下表：

边偏移属性	示例	说明
top	top: 100px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 100px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 100px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 100px	右侧偏移量，定义元素相对于其父元素右边线的距离。

静态定位

静态定位的语法格式如下：
选择器 { position: static; }

注意：
1、静态定位是元素默认的定位方式；
2、静态定位是按照标准流的特性摆放位置，它没有边偏移

相对定位

相对定位的语法格式如下：
选择器 { position: relative; }

注意：
1、相对定位是相对于自己原来的位置来移动的；
2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）

绝对定位

绝对定位的语法格式如下：
选择器 { position:absolute; }

注意：
1、绝对定位的元素在移动位置的时候，是相对于它的祖先元素来说的；
2、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位；
3、如果祖先元素有定位（相对、绝对或者是固定定位都行），则以最近一级的有定位的祖先元素为参考点移动位置；
4、绝对定位的元素不再占有原先的位置。（脱标）；
5、通常应用于子绝父相，即子级是绝对定位，父级是相对定位；
— 子绝父相的由来：因为父级需要占有位置，所以是相对定位；而子盒子不需要占有位置，所以是绝对定位

固定定位

固定定位的语法格式如下：
选择器 { position: fixed; }

注意：
1、固定定位是元素固定于浏览器可视区的位置，它的参照点是浏览器的可视窗口；
2、固定定位的元素不再占有原来的位置（脱标）

粘性定位

粘性定位的语法格式如下：
选择器 { position: sticky; top: 10px; }

注意：
1、粘性定位可以认为是相对定位和固定定位的混合；
2、粘性定位的元素是以浏览器的可视窗口为参照点移动元素；
3、粘性定位继续占有原先的位置；
4、必须添加top、bottom、left、right其中一个才有效；
5、一般都是跟页面滚动搭配使用；
6、兼容性较差，IE不支持

定位的叠放次序

• 在使用定位布局的时候，可能会出现盒子重叠的情况，此时我们就可以使用z-index来控制盒子的前后次序。

定位的叠放次序的语法格式如下：
选择器 { z-index: 1; }

注意：
1、z-index的数值可以是正整数、0、负整数，默认是auto，数值越大，盒子越靠上；
2、如果属性值相同，则按照书写顺序，后来居上；
3、属性值后面不能加单位；
4、只有定位的盒子才有z-index属性

定位的拓展

• 添加了绝对定位的盒子不能通过margin:0 auto水平居中，但绝对定位的盒子可以通过以下步骤实现水平居中：

1. 让盒子的左侧移动到父级元素的水平中心位置，即：left: 50%
2. 让盒子向左移动自身宽度的一半，即：margin-left: -xxpx

• 定位的特殊性（绝对定位和固定定位和浮动类似）：

1. 行内元素添加绝对或者固定定位后，可以直接设置高度和宽度
2. 块级元素添加绝对或者固定定位后，如果没有设置高度或者宽度，则默认大小是内容的大小

• 浮动元素、绝对定位和固定定位的元素都不会触发外边距合并问题以及外边距塌陷问题。
• 浮动元素只会压住它下面标准流的盒子，不会压住下面标准流盒子里面的文字（图片）；而绝对定位或固定定位的元素则会压住它下面标准流的所有内容。（至于为什么浮动不会压住文字和图片，那是因为浮动的最初目的是做文字环绕效果的。）

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！