2024-03-01发表2024-11-01更新前端 / CSS14 分钟读完 (大约2043个字)

5-定位

CSS定位

定位简介

定位（position）

定位是一种更加高级的布局手段

通过定位可以将元素摆放到页面的任意位置

使用position属性来设置定位

可选值	含义
`static`	不开启定位，元素是静止的，默认值
`relative`	开启元素的相对定位
`absolute`	开启元素的绝对定位
`fixed`	开启元素的固定定位
`sticky`	开启元素的粘滞定位

相对定位

使用了相对定位后，只会移动自身的布局位置，而不会对已存在的其他元素产生任何影响

偏移量（offset）

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

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

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

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

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

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

相对定位的特点

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

Q1:如果给上述三个 div 都设置相对定位，那么它们的层级关系会是什么样的呢？或者说谁会被谁覆盖呢？

  <style>
    .box1{
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      left: 10px;
    }
    .box2{
      width: 100px;
      height: 100px;
      background-color: yellow;
      position: relative;
      left: 10px;
      bottom: 50px;  
    }
    .box3{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: relative;
      left: 10px;
      bottom: 120px;
    }
  </style>
</head>
<body>
 
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>

相对定位层级

A：在页面文档流中，越靠下的元素开启相对定位后，其层级越高(z-index)

Q2：相对定位的第三个特点相对定位会提升元素的层级，是不是就类似于浮动一样脱离了文档流？

A：我们可以对比下，浮动和相对定位的区别

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

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

浮动和相对定位都是移动位置（貌似是废话）
浮动和相对定位不会从父元素中移出

Q3：相对定位的第四个特点中块还是块，行内还是行内，意味着行内元素也可以使用相对定位是吗？

A：可以

绝对定位

绝对定位的特点

开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
开启绝对定位后，元素会从文档流中脱离
绝对定位会改变元素的性质：行内变成块，块的宽高被内容撑开（与相对定位相反）
绝对定位会使元素提升一个层级
绝对定位元素是相对于其包含块进行定位的（与相对定位不同）

包含块（containing block）

正常情况下：

包含块就是离当前元素最近的开启了定位的祖先块元素
如果所有的祖先元素都没有开启定位，则html（根元素、初始包含块）就是它的包含块

绝对定位元素的布局

水平布局

在文档流中的水平布局等式：

1	margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度

当使用绝对定位时，需要添加left和right两个值（此时规则和之前一样，只是多添加了两个值）

1	left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其包含块素的宽度

当发生过度约束时

如果 9 个值中没有auto，则自动调整right值以使等式满足（之前 7 个值是margin-right）
如果 9 个值中有auto，则自动调整auto的值以使等式满足

可设置auto的值：

margin-left/margin-right /width /left /right

因为left和right的值默认是auto，所以如果没有设置left和right，当等式不满足时，则会自动调整这两个值

垂直布局

垂直方向布局的等式的也必须要满足

1	top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + top = 其包含块元素的高度

固定定位

固定定位的特点

将元素的position属性设置为fixed，则开启了元素的固定定位
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
- 唯一不同的是，固定定位永远参照于浏览器的视口（viewport，可视窗口）进行定位，不会随网页的滚动条滚动

粘滞点位

该元素是根据文档流进行定位的，即相对于包含块进行偏移
偏移量不会影响任何其他元素的位置
粘性元素总是“粘”到其最近的具有“滚动机制”的祖先元素（当overflow为hidden、scroll、auto、overlay时创建），即使该祖先不是最近的实际滚动祖先

粘滞定位的特点

粘滞定位和相对定位的特点基本一致
不同的是粘滞定位可以在元素到达某个位置时将其固定

几种定位的对比

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

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

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

元素的层级

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

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

#css基础定位