【前端学习之HTML&CSS】-- CSS第八篇 – 视觉格式化模型之三 定位
文章目录
本文具体内容参考了B站渡一教育的课程,原课程链接如下:
渡一教育课程
前言
html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言,在学习过程中,我们首先从html出发,在html的学习过程中深入了解css,在步入学期末尾阶段再进行js的学习。
在CSS的学习过程中,最重要的内容,主要包含属性值的计算过程、层叠继承、盒模型以及视觉格式化模型,本节博客继续之前学习的内容,主要负责视觉格式化模型中关于定位的相关内容。通过定位我们可以实现手动控制元素在包含块中的精准位置.
概念
- 概念: 手动控制元素在包含块中的精准位置
- 涉及属性: position
1. position
- 默认值:static,静态定位(不定位)
- relative:相对定位;
- absolute:绝对定位;
- fixed:固定定位;
一个元素只要position的值不是static,就认为该元素是一个定位元素;定位元素会脱离文档流(相对定位除外)
脱离文档流的元素:
- 文档流中元素拜访时,忽略脱离文档流的元素;
- 文档流中元素计算自动高度时,会忽略脱离文档流的元素;
2. 相对定位
特殊:不会导致元素脱离文档流,只是元素在原位置上进行偏移
可以通过四个CSS属性设置其位置:
- left、right、top、bottom;
【重点:此偏移为相对该元素原位置的偏移,元素的高度、宽度不变】
#p1{
position: relative;
/* margin会保证盒子撑满包含块,宽度会减小 */
left: 50px;
/* 然而这里只是相对于该元素原位置的偏移,宽度不变 */
bottom: 20px;
/* 重点:设置出现矛盾:以左边和上边为准 */
}
**相对位置的偏移不会对其他元素造成任何影响**
3. 绝对定位
1) 宽高auto:
- 盒模型中宽高为auto时:盒子尺寸适应内容
2) 包含块变化:
- 找祖先元素(从父元素一层层往上找)中第一个定位元素,该元素的填充盒为其包含块;
.incl{
position: absolute;
/* left表示绝对定位元素的左边离包含块左边的距离 */
left: 0;
top: 0;
}
.grf{
position: relative;
}
<div class="grf" style="width: 500px; height: 300px; padding: 30px; border: 2px solid;">
这里是祖先元素,第一个定位元素;
<div style="width: 400px; height: 200px; padding: 30px; border: 2px solid;">
这里是父元素,但是没有定位;
<div class="incl" style="width: 100px; height: 100px; background: #008c8c;">
这里用于测试包含块的变化
</div>
</div>
</div>
- 若找不到祖先定位元素,则其包含块为整个网页(初始化包含块)
3) 应用:
- 精准定位,如将一张图片放在另一张图片的某个位置,可将其中下面的图片设置为相对定位,上方的图片设置为绝对定位;
4. 固定定位
-
其他情况和绝对定位完全一样
-
包含块不同:固定为视口(浏览器的可视窗口)
如该图中的绿色区域:
在修改参数时,发生的变化效果如图,类似于那种烦人广告或者顶端的导航栏:
5. 定位下的居中
-
主要针对于绝对定位和固定定位
-
某个方向居中步骤:
- 定宽/高
- 将左右/上下距离设置为0
- 将左右/上下margin设置为auto
<div style="width: 100px; height: 100px; position: fixed;
background: #008c8c; left: 0; top: 0; right: 0; margin: auto;">
这里用来测试定位居中
</div>
绝对定位和固定定位中,在margin为auto时,会自动吸收剩余空间
6. 多个定位元素重叠
- 设置z-index,通常情况下,该值越大,越靠近用户;
.item{
position: absolute;
width: 70px;
height: 70px;
border: 4px solid;
/* 变成边框盒,容易设置 */
border-radius: 50%;
/* 设置为原型 */
}
.circle1{
left: 0;
top: 0;
border-color: blue;
z-index: 1;
}
.circle2{
left: 70px;
top: 0;
border-color: black;
z-index: 2;
}
.circle3{
left: 140px;
top: 0;
border-color: red;
z-index: 3;
}
.circle4{
left: 105px;
top: 40px;
border-color: yellow;
z-index: 4;
}
.circle5{
left: 35px;
top: 40px;
border-color: green;
z-index: 5;
}
<div class="item circle1"></div>
<div class="item circle2"></div>
<div class="item circle3"></div>
<div class="item circle4"></div>
<div class="item circle5"></div>
z-index:注意事项
- 只有定位元素设置该值有效;
- z-index可以为负数,如果是负数,遇到常规流和浮动元素,则会被其覆盖;
6. 补充
- 绝对定位/固定定位一定是块盒
- 绝对定位/固定定位一定不是浮动
- 没有外边距合并
总结
本篇博客主要负责介绍了视觉格式化模型中的定位布局,在学习过本节内容后,我们就将基本的视觉格式化模型格局都学习完毕,和往常一样,在下一篇博客中我们将会给出一些对应的练习,包括二级菜单以及弹出层、轮播图等,敬请期待。