position

Weipeng Qiao大约 4 分钟

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了该元素的最终位置

边偏移属性	说明
top	顶端偏移量
bottom	底部偏移量
left	左侧偏移量
right	右侧偏移量

`position:static`静态定位

静态定位按照标准流的特性摆放位置，没有边偏移。

`position:relative`相对定位

相对定位是元素相对于它原来的位置来定位。
占有之前的位置，不脱标

`position:absoult`绝对定位

绝对定位的参考它的包含块。
- 对于没有脱离文档流的元素：包含块就是父元素
- 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包
  含块就是整个页面)
绝对定位元素的特点：
1. 脱离文档流，会对后面的兄弟元素、父元素有影响
2. left 不能和 right 一起设置，top 和 bottom 不能一起设置。
3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4. 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5. 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成定位元素
  - 定位元素：默认宽、高都被内容所撑开，且能自由设置宽高。

`position:fixed`固定定位

固定定位的参考它的视口,不随滚动条滚动
固定定位元素的特点
1. 脱离文档流，会对后面的兄弟元亲、父元亲有影响。
2. left 不能和 right 一起设置，top 和 bottom 不能一起设置。
3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主
4. 固定定位的元素，也能通过 marg1n 调率位音，但不在荐这样做。
5. 无论是什么元素〔行内、行内块、块级)设置为固定定位之后，都变成了定位元素。

元素必须设置 width

`position:sticky`粘性定位

粘性定位的参考点是离它最近的一个拥有"滚动机制"的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
粘性定位元素的特点
1. 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
2. 最常用的值是 top 值。(必须添加 top 、left、right、bottom 其中一个才有效)
3. 粘性定位和浮动可以同时设置，但不推荐这样做。
4. 粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5. 粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

z-index（叠放次序）

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用 z-index 来控制盒子的前后顺序（z 轴）
如果属性值相同，则按照书写顺序，后来居上；
属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
数字后面不能加单位。
z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

子绝父相

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到

定位的特殊应用

发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
发生相对定位后，元素依然是之前的显示模式
以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素

让定位元素的宽充满包含块

宽度想与包含块一致，可以给定位元素同时设置 1eft 和 right 为 0。
高度想与包含块一致，top 和 bottom 设置为 0。

让定位元素在包含块中居中

方案一

left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

方案二：

1eft: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

注意：该定位的元素必须设置宽高！