CSS 定位布局 - 相对、绝对、固定、粘滞四种定位
文档流
默认文档流，指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式，其中每一个块元素都独占一行，行内元素则在一行之内从左到右排列，直到在当前行遇到了边界后，换到下一行的起点起点继续排列。
脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来，其他盒子在定位的时候，会当做没看到它，两者位置重叠都是可以的，但是依然在DOM树中存在。
定位的实现
【CSS 定位布局 - 相对、绝对、固定、粘滞四种定位】我们可以通过设置css中position属性的值来设定元素的定位类型。position的值分为以下几种：
- static默认(非定位元素)
- inherit从父元素继承 position 属性的值
- relative相对(定位元素)
- absolute绝对(定位元素)
- fixed固定(定位元素)
- sticky粘滞(定位元素)
1.相对布局 position: relative;
- 不脱离文档流。
- 相对于它原来的位置移动。
文章图片
从代码看出，只要在紫色div的样式属性设置了 position:relative; 之后，就可以使用left和 top设置与原来文档布局位置的偏移量。
文章图片
实现代码如下：
Document - 锐客网 .box {
width: 500px;
height: 500px;
border: 2px solid black;
}
.box > div {
width: 200px;
height: 100px;
}
.one {
background-color: blueviolet;
position:relative;
left: 50px;
top: 50px;
}
.two {
background-color: cyan;
}
2.绝对布局 position: absolute;
- 脱离文档流。
- 它以距离它最近的父定位元素为参照，如果它所有的父元素都不是定位元素，则以body为参照。(一般情况下，绝对定位元素都是嵌套在相对定位元素内容来使用)
文章图片
当设置紫色的div为绝对定位之后，发现蓝色的div不见了。
其实，蓝色的div并不是不见了，而是跟紫色的div重叠了。因为当紫色div被设置为绝对定位之后，就会脱离文档流布局，此时它就相当于漂浮了起来，而蓝色div的因为没有了紫色div的挤压，自然就上去与紫色div重叠在一起了。
接下来，让我们为紫色的div设置偏移量。
文章图片
此时，我们发现紫色的div出现在了父元素外面，页面的左上角。这是因为它的父元素中没有定位元素，所以它的偏移量是相对于body来进行调整的。
接下来，我们将其父元素设置为相对定位，看看会发生什么？
文章图片
这个时候我们看到紫色的div回到了它父元素中。
3.固定布局 position: fixed;
- 脱离文档流。
- 它相对于浏览器窗口进行定位，相当于就是把这个元素钉在了浏览器窗口上了，无论我们怎么操作滚动条都无法改变他的位置。
文章图片
从上述GIF中，我们可以看出无论我们怎么操作滚动条，紫色div都在整个浏览器页面的固定位置。
这种定位方式最适合用于放置广告。
4.粘滞布局 position: sticky;
- 在没有达到阈值的时候是不脱离文档流（相对），达到阈值脱离文档流（固定），可以通过left、top、right、bottom来设定阈值。
文章图片
css代码如下：
.two {
width: 100%;
height: 100px;
background-color: lightcoral;
position: sticky;
/* 设置为粘滞定位 */
top: 0;
/* 当该元素到达整个页面距离顶端0px的时候，他会一直停留在此位置 */
}定位元素层级 z-index
定位元素是浮动于正常的文档流上面的，我们可以通过z-index属性来设置元素的层级。
在哪些场景里我们会用到z-index这个属性呢？比如说，当我们做一个供用户输入登录信息的弹框时，我们希望当用户点击登录后，弹出的框不会被其他任何元素覆盖时，我们可以通过设置它的z-index属性，将其层级设置为最高即可。
下面这个案例将会帮助我们学习和理解z-index属性。
文章图片
代码如下：
Document - 锐客网 .box {
width: 400px;
height: 600px;
margin: 50px auto;
border: 2px solid black;
position: relative;
}
.box > div {
width: 100px;
height: 100px;
position: absolute;
}
.one {
background-color: red;
top: 20px;
left: 20px;
}
.two {
background-color: orange;
top: 40px;
left: 40px;
}
.three {
background-color: yellow;
top: 60px;
left: 60px;
}
.four {
background-color: green;
top: 80px;
left: 80px;
}
.five {
background-color: cyan;
top: 100px;
left: 100px;
}
.six {
background-color: blue;
top: 120px;
left: 120px;
}
.seven {
background-color: violet;
top: 140px;
left: 140px;
}
我们可以看到从顶到底依次是：紫、蓝、青、绿、黄、橙、赤。
如果我们想要从顶到底依次是：赤、橙、黄、绿、青、蓝、紫的话，只需要在每个div中设置z-index属性，就可以轻松实现。如下图所示：
文章图片
部分CSS代码如下：
.one {
background-color: red;
top: 20px;
left: 20px;
z-index: 7;
}
.two {
background-color: orange;
top: 40px;
left: 40px;
z-index: 6;
}
.three {
background-color: yellow;
top: 60px;
left: 60px;
z-index: 5;
}
.four {
background-color: green;
top: 80px;
left: 80px;
z-index: 4;
}
.five {
background-color: cyan;
top: 100px;
left: 100px;
z-index: 3;
}
.six {
background-color: blue;
top: 120px;
left: 120px;
z-index: 2;
}
.seven {
background-color: violet;
top: 140px;
left: 140px;
z-index: 1;
}课后练习
按照下图所示要求，制作图标。
文章图片
1.先写两个div。
文章图片
2.将第一个div设置为相对定位，将第二个div设置为绝对定位。
并且设置偏移量，将第二个div放在第一个div的右上角。
文章图片
3.通过border-radius属性设置两个div四周的弧度。
将第二个div的弧度设置为其宽度的一半就变成了一个圆。
文章图片
代码如下：
Document - 锐客网 .box {
width: 75px;
height: 75px;
background-color: lightgreen;
margin: 50px auto;
position: relative;
border-radius: 5px;
}
.box > img {
height: 50px;
background-color: white;
}
.red-radius {
width: 25px;
height: 25px;
background-color: red;
line-height: 25px;
text-align: center;
position: absolute;
top: -12.5px;
right: -12.5px;
border-radius: 12.5px;
}
文章图片
7
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 三国谋略22（找准你的定位）
- 织网布局，社群营销走进山东玖零落地企业
- 3.css浮动
- 瀑布流布局
- 2018-12-03-新手教程重构思路
- 详解布局Masonry
- 20.小程序（布局适配方案（rpx、px、vw、vh））
- 渠道云定位
- 数据透视表布局及美化