css定位
- CSS 定位属性允许对元素进行定位改变其在页面的位置。
- CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
- 普通流中的元素的位置由元素在 HTML 中的位置决定。
相对定位
相对盒子自己原来的位置进行调整，称为相对定位
position: relative;
top: 100px;
left: 100px;
left：向右移动（左边与原先间隔固定值）right：向左移动 top：向下移动 bottom：向上移动 值可
为负，为负时向相反方向移动
绝对定位
盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置
1.相对浏览器窗口定位
2.父级有定位属性时，相对父级盒子定位
3.逐级往上找，相对碰到的第一个有定位属性的父盒子定位，
如果没有，就相对浏览器定位
子绝父相
为了让绝对定位有定位点，一般会给他的父盒子加相对定位
.div1{
/* 相对定位 */
position: relative;
top: 0;
left: 0;
}
.div2{
width: 200px;
height: 200px;
background-color: pink;
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
}
扩展知识
/*
z-index
色湖之堆积顺序的
1.默认是z-index:1
2.数字越大越考前显示
3.数字越小比如复数越靠后显示
*/
固定定位
固定位置
不管页面如何滚动，他都永远固定在那里， 相对浏览器窗口定位，不随页面滚动改变位置
固定定位的用途：“返回顶部”、“楼层导航”
.box2{
position: fixed;
right: 40px;
bottom: 40px;
width: 60px;
height: 300px;
background-color: pink;
}
粘性定位
偏移量同相对定位
页面滚动时，滚动到顶部，直接吸顶
(这是 css3 新增的属性值)粘性定位。最初会被当作是relative，相对于原来的位置进行偏移； 一旦超
过一定阈值之后，会被当成 fixed定位，相对于视口进行定位。position:sticky ，其支持还不是很普
遍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box7{
/* 粘性定位
偏移量同相对定位
页面滚动时，滚动到顶部，直接吸顶
*/
position: sticky;
top: 100px;
/* left: 0; */
}
.box9{
width: 10px;
height: 10000px;
}
</style>
</head>
<body>
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box1">333</div>
<div class="box1">444</div>
<div class="box1">555</div>
<div class="box6">666</div>
<div class="box7">67</div>
<div class="box8">686</div>
<div class="box9">696</div>
</body>
</html>
小结
提示：代码需要多练习，多上手
920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
