定位 position

1.为什么需要定位？

提问： 以下情况使用标准流或者浮动能实现吗？

1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。

所以：

1. 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

2.定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

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

（1）定位模式

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置。

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘滞定位

（2）边偏移

边偏移就是定位的盒子移动的最终位置。有 top、bottom、left 和 right 4 个属性。

注意：可以为负值。

边偏移属性	实例	描述
top	top: 80px	顶端偏移量，定位元素相对于其父元素上边线的距离
bottom	bottom: 80px	底部偏移量，定位元素相对于其父元素下边线的距离
left	left: 80px	左侧偏移量，定位元素相对于其父元素左边线的距离
rigth	right: 80px	右侧偏移量，定位元素相对于其父元素右边线的距离

3.相对定位

3.1 基本使用

相对定位是元素在移动位置的时候相对于它原来的位置来说的定位。

语法：

selector {
  position: relative;
}

当元素开启相对定位以后，可以通过偏移量来设置元素的位置

offset 属性	含义
top	定位元素和定位位置的上边距离
bottom	定位元素和定位位置的下边距离
left	定位元素和定位位置的左侧距离
right	定位元素和定位位置的右侧距离

定位元素垂直方向的位置由top和bottom两个属性控制，通常情况下只会使用其中之一

• top值越大，定位元素越靠下
• bottom值越大，定位元素靠上

定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用其中之一

• left越大，定位元素越靠右
• right越大，定位元素越靠左

3.2 相对定位的特点

相对定位的特点：

1. 当元素开启相对定位以后，如果不设置偏移量元素，则元素不会发生任何变化（这里注意，不仅仅是位置）
2. 相对定位是参照于元素在文档流中的位置进行定位的（可以理解为相对于自身原始位置）
3. 相对定位会提升元素的层级（表现为可以覆盖其他元素）
4. 相对定位不会改变元素的性质：块还是块，行内还是行内

在页面文档流中，越靠下的元素开启相对定位后，其层级越高（没有设置层级或层级z-index设置相同值时，优先显示靠下的元素）。

行内元素也可以使用相对定位。

浮动和相对定位

浮动和相对定位的区别

• 参考系不同：浮动的参考系是其父元素；相对定位是相对于自身
• 可移动方向不同：浮动只能左右移动；相对定位是上下左右移动
• 影响不同：浮动会影响页面布局（包括下方元素位置影响和高度塌陷问题）；相对定位不对影响页面布局，浮动脱离了文档流，不再占据页面位置；相对定位仍然占据页面位置
• 性质不同：浮动会改变元素的性质（不再独占一行，其宽高都会被内容撑开）；相对定位不会改变元素的性质
• 文字环绕：浮动不会覆盖文字；相对定位可以覆盖文字

当然，浮动和相对定位也有其相似之处

• 浮动和相对定位都是移动位置
• 浮动和相对定位不会从父元素中移出

4.绝对定位

绝对定位是元素在移动位置的时候相对于它祖先元素来说的定位（拼爹型）。

语法：

selector {
  position: absolute;
}

绝对定位的特点：

1. 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
2. 绝对定位不再占有原先的位置（脱标），并且脱标的程度大于浮动（会压住浮动）
3. 绝对定位会改变元素的性质：行内变成块，块的宽高被内容撑开（与相对定位相反）
4. 绝对定位会使元素提升一个层级
5. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）
6. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置

5.子绝父相的由来

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

这个 “子绝父相” 太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

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

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位。

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，“子绝父绝” 也会遇到。

为什么非要用定位？浮动不可以吗？

答案：用浮动做某些布局远远没有定位简单和方便！例如，轮播图。

• 左右两边的图片切换按钮，利用浮动也可以做。但是，假如放置图片的盒子是在切换按钮之前添加的，那么根据浮动元素只能影响后面盒子的特性，切换按钮就只可能在图片底部之下，不可能浮于图片之上！
• 就算切换按钮用浮动实现了，但是左下角的轮播序号点图如果也用浮动实现，结果就是轮播序号点图会与切换按钮在一行并排浮动！

可见，浮动单纯用于左右排列盒子是非常适合的，但是用于空间层次上排列盒子就不适合了！应该用定位实现。

重点：竖向上布局找标准流，横向上布局找浮动，空间上布局找定位！

6.固定定位

固定定位是元素固定于浏览器可视区的位置。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。

主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

语法：

selector {
  position: fixed;
}

固定定位的特点：

1. 以浏览器的可视窗口为参照点移动元素
   • 跟父元素没有任何关系
   • 不随滚动条滚动
2. 固定定位不再占有原先的位置
   • 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

7.粘滞定位

粘性定位可以被认为是相对定位和固定定位的混合。

语法：

selector {
  position: sticky;
  top: 10px;
}

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加 top 、left、right、bottom 其中一个才有效
4. 粘滞定位可以在元素到达某个位置时将其固定

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和包含块（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会 “固定” 在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何 “sticky” 行为。

跟页面滚动搭配使用。 兼容性较差，IE 不支持。

8.定位的总结

我们通过上面的学习，知道position属性有五个可选值

但static是默认值，即不开启定位，所以我们只需要对比 4 种定位方式即可

定位方式	是否不设置偏移量，元素不会发生改变	是否脱离文档流	是否改变元素性质	是否提升元素层级	参考系
relative（相对定位）	√	×	×	√	参照于元素在文档流中的位置
absolute（绝对定位）	×	√	√	√	参照于其包含块
fixed（固定定位）	×	√	√	√	参照于浏览器的视口
sticky（粘滞定位）	×	√	√	√	参照于浏览器的视口

1. 一定记住，相对定位、固定定位、绝对定位 两个大的特点： 1. 是否占有位置（脱标否） 2. 以谁为基准点移动位置。
2. 学习定位重点学会子绝父相。

9.元素层级

对于开启了定位元素，可以通过z-index属性来指定元素的层级

• z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示
• 如果元素的层级一样，则优先显示靠下的元素
• 祖先的元素的层级再高，也不会盖住后代元素

语法：

selector {
  z-index: 1;
}

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

10.定位的拓展

（1）定位特殊特性

绝对定位和固定定位也和浮动类似。

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

（2）脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。

（3）绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。

但是绝对定位（固定定位） 会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素。