本文详细介绍了CSS定位，包括为什么需要定位、定位的组成、相对定位、绝对定位、固定定位和粘滞定位的特点及应用场景。特别讨论了相对定位的层级提升、浮动与定位的区别，以及子绝父相的布局原则。同时，提到了元素层级的控制和定位在解决外边距塌陷等方面的优势。
17.定位
17.1为什么需要定位？
提问： 以下情况使用标准流或者浮动能实现吗？
-
某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
-
当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。
所以：
- 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
- 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
17.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 |
右侧偏移量，定位元素相对于其父元素右边线的距离 |
17.3相对定位
17.3.1基本使用
相对定位是元素在移动位置的时候相对于它原来的位置来说的定位。
语法：
选择器 {
position: relative; }
当元素开启相对定位以后，可以通过偏移量来设置元素的位置
| offset属性 | 含义 |
|---|---|
top |
定位元素和定位位置的上边距离 |
bottom |
定位元素和定位位置的下边距离 |
left |
定位元素和定位位置的左侧距离 |
right |
定位元素和定位位置的右侧距离 |
定位元素垂直方向的位置由top和bottom两个属性控制，通常情况下只会使用其中之一
-
top值越大，定位元素越靠下 -
bottom值越大，定位元素靠上
定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用其中之一
-
left越大，定位元素越靠右 -
right越大，定位元素越靠左
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位</title>
<style>
.box1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
17.3.2相对定位的特点
相对定位的特点：（务必记住）
-
当元素开启相对定位以后，如果不设置偏移量元素，则元素不会发生任何变化（这里注意，不仅仅是位置）
-
相对定位是参照于元素在文档流中的位置进行定位的（可以理解为相对于自身原始位置）
-
相对定位会提升元素的层级（表现为可以覆盖其他元素）
-
相对定位不会改变元素的性质：块还是块，行内还是行内
Q1：如果给上述三个div都设置相对定位，那么它们的层级关系会是什么样的呢？或者说谁会被谁覆盖呢？
A：我们直接进行测试验证
可以看到覆盖关系是：box3 >> box2 >> box1
可以大概猜测：在页面文档流中，越靠下的元素开启相对定位后，其层级越高（没有设置层级或层级z-index设置相同值时，优先显示靠下的元素）
Q2：相对定位的第三个特点相对定位会提升元素的层级，是不是就类似于浮动一样脱离了文档流？
A：我们可以对比下，浮动和相对定位的区别
-
参考系不同：浮动的参考系是其父元素；相对定位是相对于自身
-
可移动方向不同：浮动只能左右移动；相对定位是上下左右移动
-
影响不同：浮动会影响页面布局（包括下方元素位置影响和高度塌陷问题）；相对定位不对影响页面布局
-
性质不同：浮动会改变元素的性质（不再独占一行，其宽高都会被内容撑开）；相对定位不会改变元素的性质
-
文字环绕：浮动不会覆盖文字；相对定位可以覆盖文字（这个可以自行验证，不再赘述）
当然，浮动和相对定位也有其相似之处
-
浮动和相对定位都是移动位置
-
浮动和相对定位不会从父元素中移出
可以看出，浮动和相对定位的区别是更多的
最后回答一点：浮动脱离了文档流，不再占据页面位置；相对定位仍然占据页面位置
Q3：相对定位的第四个特点相对定位不会改变元素的性质：块还是块，行内还是行内，但是上述例子中元素开启相对定位后好像就不再独占一行了，这个怎么理解？
A：相比于浮动元素的特点，相对定位不会改变元素的性质其实是一个相对不容易理解的问题。其位置发生改变以后，布局并没有产生影响，因为它的结构仍然占据着原来的那个位置。只是其内容发生了移动。
Q4：相对定位的第四个特点中块还是块，行内还是行内，意味着行内元素也可以使用相对定位是吗？
A：是的
17.4绝对定位
绝对定位是元素在移动位置的时候相对于它祖先元素来说的定位（拼爹型）。
语法：
选择器 {
position: absolute; }
绝对定位的特点：（务必记住）
-
开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
-
绝对定位不再占有原先的位置（脱标），并且脱标的程度大于浮动（会压住浮动）
-
绝对定位会改变元素的性质：行内变成块，块的宽高被内容撑开（与相对定位相反）
-
绝对定位会使元素提升一个层级
-
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）
-
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
17.5布局
17.5.1水平方向的布局
我们之前说过，水平方向的布局等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度
当使用绝对定位时，需要添加left和right两个值（此时规则和之前一样，只是多添加了两个值）
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，当等式不满足时，则会自动调整这两个值
17.5.2水平居中
<style>
.box1 {
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
/* 左右外边距设置为auto */
margin-left: auto;
margin-right: auto;
/* 绝对定位 */
position: absolute;
left: 0;
right: 0;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
最低0.47元/天 解锁文章
2783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
