文章目录
定位的简介
需求分析
按照我们之前所学知识，可以怎么实现呢？
应该来说不难，很容易实现
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
/* 左外边距、上外边距 */
margin-left: 200px;
margin-top: -200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: orange;
/* 上外边距 */
margin-top: 200px;
}
我们分别给box2和box3添加了外边距之后，就可以达到需求效果
当然也可以使用浮动来解决上述问题，但稍微麻烦一点
不管怎样，问题也是显而易见。我们实际开发中，页面上的元素可能很多，这样改必然是 牵一发而动全身
那么仅仅靠我们之前学习的布局知识，不足以轻松应对这种场景
那么就势必需要一个方便我们处理这种场景的办法，它就是定位
呸！不是！糟老头子
定位（position）
定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置
使用position属性来设置定位
| 可选值 | 含义 |
|---|---|
static |
不开启定位，元素是静止的，默认值 |
relative |
开启元素的相对定位 |
absolute |
开启元素的绝对定位 |
fixed |
开启元素的固定定位 |
sticky |
开启元素的粘滞定位 |
1. 相对定位
当元素的position属性值设置为relative时，则开启了元素的相对定位
偏移量（offset）
当元素开启相对定位以后，可以通过偏移量来设置元素的位置
| offset属性 | 含义 |
|---|---|
top |
定位元素和定位位置的上边距离 |
bottom |
定位元素和定位位置的下边距离 |
left |
定位元素和定位位置的左侧距离 |
right |
定位元素和定位位置的右侧距离 |
定位元素垂直方向的位置由top和bottom两个属性控制，通常情况下只会使用其中之一
top值越大，定位元素越靠下bottom值越大，定位元素靠上
定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用其中之一
left越大，定位元素越靠右right越大，定位元素越靠左
ok，介绍完相对布局，我们的需求是不是变得so easy！
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
/* 开启相对定位 */
position: relative;
top: -200px;
left: 200px;
}
我们给box2设置相对定位，就得到了我们想要的页面效果
可以看出，使用了相对定位后，只会移动自身的布局位置，而不会对已存在的其他元素产生任何影响
现在我们所举的例子不是很明显，但当页面布局比较复杂，特别是页面元素很多的时候，其优越性就可以大大体现出来
相对定位的特点
-
当元素开启相对定位以后，如果不设置偏移量元素，则元素不会发生任何变化（这里注意，不仅仅是位置）
-
相对定位是参照于元素在文档流中的位置进行定位的（可以理解为相对于自身原始位置）
-
相对定位会提升元素的层级（表现为可以覆盖其他元素）
-
相对定位不会改变元素的性质：块还是块，行内还是行内
Q1：如果给上述三个div都设置相对定位，那么它们的层级关系会是什么样的呢？或者说谁会被谁覆盖呢？
A：百闻不如一见
，光说不练假把式
，我们直接进行测试验证
可以看到覆盖关系是：box3 >> box2 >> box1
我们再稍微调整下box3和box2的前后位置
会发现覆盖关系变成了：box2 >> box3 >> box1
可以大概猜测：在页面文档流中，越靠下的元素开启相对定位后，其层级越高 （这里也只是我个人的揣测，待后续学习中验证）（在后续学习中已得到验证：没有设置层级或层级z-index设置相同值时，优先显示靠下的元素）
Q2：相对定位的第三个特点相对定位会提升元素的层级
，是不是就类似于浮动一样脱离了文档流？
A：我们可以对比下，浮动和相对定位的区别
- 参考系不同：浮动的参考系是其父元素；相对定位是相对于自身
- 可移动方向不同：浮动只能左右移动；相对定位是上下左右移动
- 影响不同：浮动会影响页面布局（包括下方元素位置影响和高度塌陷问题）；相对定位不对影响页面布局
- 性质不同：浮动会改变元素的性质（不再独占一行，其宽高都会被内容撑开）；相对定位不会改变元素的性质
- 文字环绕：浮动不会覆盖文字；相对定位可以覆盖文字（这个可以自行验证，不再赘述）
当然，浮动和相对定位也有其相似之处
- 浮动和相对定位都是移动位置（貌似是废话）
- 浮动和相对定位不会从父元素中移出
可以看出，浮动和相对定位的区别是更多的
最后回答一点：浮动脱离了文档流，不再占据页面位置；相对定位仍然占据页面位置（所以怎么能够叫 脱离文档流
呢？）
Q3：相对定位的第四个特点相对定位不会改变元素的性质：块还是块，行内还是行内
，但是上述例子中元素开启相对定位后好像就不再独占一行了，这个怎么理解？
A：相比于浮动元素的特点，相对定位不会改变元素的性质其实是一个相对不容易理解的问题。但其实也不难，可以把相对定位认为是元素的灵魂出窍
。其位置发生改变以后，布局并没有产生影响，因为它的肉体
（结构）仍然占据着原来的那个位置。只是其灵魂
（内容）发生了移动。
Q4：相对定位的第四个特点中块还是块，行内还是行内
，意味着行内元素也可以使用相对定位是吗？
A：眼见为实，耳听为虚
，直接看示例效果
善于思考是好事，但也别忘了自动动手，丰衣足食
。自己实操一遍，胜过千言万语
2. 绝对定位
当元素的position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位的特点
- 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
- 开启绝对定位后，元素会从文档流中脱离
- 绝对定位会改变元素的性质：行内变成块，块的宽高被内容撑开（与相对定位相反）
- 绝对定位会使元素提升一个层级
- 绝对定位元素是相对于其包含块进行定位的（与相对定位不同）
包含块（containing block）
正常情况下：
- 包含块就是离当前元素最近的开启了定位的祖先块元素
- 如果所有的祖先元素都没有开启定位，则
html（根元素、初始包含块）就是它的包含块
<body> <!-- 如果box1开启定位，则box2的包含块是box1，否则就是body --> <div class="box1"> <div class="box2"></div> </div><span class="token comment"><!-- 如果box3开启定位，则em的包含块是box3，否则就是body --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>hello<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"
最低0.47元/天 解锁文章
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
