目录
扫描二维码关注公众号，回复：
14474414 查看本文章
一、定位
1、效果
在盒子模型中，可以用定位的手段达到修改边界的效果，更准确来说，可以达到在父子类元素、浏览器中随意定位的效果
2、特点
不同于修改边界、浮动，定位手段仅仅影响当前元素，而不会排挤其它元素
3、开启方式
（1）在元素中打开position，默认值为static，没有定位效果，而其他值才有定位效果
（2）坐标修改值有top、right、bottom、left，通常对位元素只用其一，例如left和right，因为二维坐标轴只需要两个坐标就够了
二、相对定位（relative）
1、特点
（1）开启后不设置偏移量所有元素不会发生改变
（2）不会超出文档流
（3）不会影响元素性质（块元素、行内元素仍保持属性）
（4）层级会升高（会覆盖以前的元素）
2、定位原理
（1）概念
-相对元素（需要移动的元素）
-参照物（理解中的坐标原点）
（2）定位标准
-相对原文档流中原本的坐标进行移动（通常默认为原定元素的左上角）
（3）例子
在本例中，橙色元素本来是块元素，它本来在黄色元素下方，在相对定位中，它的坐标原点就是黄色元素的左下角
三、绝对定位（absolute）
1、特点
（1）超脱文档流
（2）如果不设置偏移量，则不设置偏移量的“元素位置”不会发生改变（意思就是，在绝对定位中，位置是不会变化的，但其它元素会受影响，上面是原因）
（3）层级提升
（4）元素性质会被改变（因为超脱了文本流）
2、定位标准
绝对定位元素是根据其“包含块”进行定位的
3、包含块（containing block）
（1）常规情况
-离当前元素最近的祖先块元素
（2）绝对定位情况
-离当前绝对定位元素最近的开启定位的祖先元素
-如果最近的都没有开启定位，则以根元素作为定位标准
（3）根元素（html，初始包含块）
四、粘滞定位（sticky）
1、特点
有元素到达某个位置时固定的独特特点
2、定位标准
粘滞定位特点和相对定位基本一致
3、例子
这里的例子不太好看出效果，最好是自己跑代码体会一下效果
五、固定定位（fixed）
1、特点
（1）唯一不同的是，固定定位永远参照于浏览器的视口定位
（2）固定定位元素不会跟随网页滚动条滚动，多用于弹窗广告
（3）但因为版本兼容性问题，不常用
2、定位标准
是一种特殊的绝对定位，定位标准与绝对定位差不多
3、例子
这里效果不太好通过截图展示，请运行代码体会
六、代码
1、相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位-相对定位</title>
<!--
定位：
1.默认（static）
2.相对（relative）
3.绝对（absolute）
4.粘滞（sticky）
5.固定（fixed）
相对定位：
1.原理
-相对元素（该移动元素）
-参照物（坐标原点）
-相对原文档流中坐标进行移动
2.特点
-开启后不设置偏移量元素不会发生改变
-不会超出文档流
-不会影响元素性质（块元素、行内元素）
-层级会升高（覆盖以前的元素）
3.可选值
-top
-bottom
-left
-right
对应基本只会选择其一
-->
<style>
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
top: -100px;
left: 100px;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
.box4 {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
top: -100px;
left: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
2、绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位-绝对定位</title>
<!--
特点
1.如果不设置偏移量，则不设置偏移量的“元素位置”不会发生改变
2.超脱文档流
3.层级提升
4.元素性质会被改变
5.绝对定位元素是根据其“包含块”进行定位的
包含块：（containing block）
1.常规情况
-离当前元素最近的祖先块元素
2.绝对定位情况
-离当前绝对定位元素最近的开启定位的祖先元素
-如果最近的都没有开启定位，则以根元素作为定位标准
根元素（html，初始包含块）
-->
<style>
.box1 {
margin-top: 100px;
width: 300px;
height: 300px;
background-color: #bfa;
/* position: relative; */
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
/* position: relative; */
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 100px;
left: 100px;
}
.box4 {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<div class="box4"></div>
</body>
</html>
3、粘滞定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位-粘滞定位</title>
<!--
特点：
-粘滞定位特点和相对定位基本一致
-但有元素到达某个位置时固定的独特特点
-->
<style>
* {
padding: 0px;
margin: 0px;
}
body {
height: 2000px;
}
.box1 {
height: 400px;
width: 400px;
background-color: #bfa;
}
ul li {
list-style: none;
float: left;
}
ul {
width: 492px;
height: 48px;
background-color: #ffe;
margin: 40px auto;
position: sticky;
top: 10px;
}
li a {
color: #999;
line-height: 48px;
display: block;
text-decoration: none;
padding: 0px 10px;
}
li a:hover {
background-color: #444;
color: #eee;
}
</style>
</head>
<body>
<div class="box1"></div>
<ul>
<li>
<a href="https://www.w3school.com.cn/h.asp">HTML/CSS</a>
</li>
<li>
<a href="https://www.w3school.com.cn/b.asp">Brower Side</a>
</li>
<li>
<a href="https://www.w3school.com.cn/s.asp">Sever Side</a>
</li>
<li>
<a href="https://www.w3school.com.cn/p.asp">Programming</a>
</li>
<li>
<a href="https://www.w3school.com.cn/x.asp">XML</a>
</li>
</ul>
</body>
</html>
4、固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定位-固定定位</title>
<!--
特点
1.是一种特殊的绝对定位
2.唯一不同的是，固定定位永远参照于浏览器的视口定位
3.固定定位元素不会跟随网页滚动条滚动，多用于弹窗广告
-->
<style>
body {
height: 2000px;
}
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
position: fixed;
right: 0px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
.box4 {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>