补上一些学习笔记，内容不多也算是做一个总结（目前正在努力学习前端、查缺补漏）
本篇文章主要谈谈自己对于Css定位的理解
由于定位内容较多，本篇文章讲解概念，每个定位将拆分成单独一篇写
往期
子篇章
正文内容
定位的作用
个人理解为：有些布局例如浮动达不到的效果，定位可以很好地作为一个补充（常用于盒子的自由移动）
定位的方式
定位方式分为：静态定位（static）、绝对定位（absolute）、相对定位（relative）、固定定位（fixed）、粘性定位（sticky）
定位的偏移
定位偏移可以有（还有很多人称之为边偏移，这里是我个人理解为定位偏移）：top（距离顶部多远）、bottom（距离底部多远）、left（距离左边多远）、right（距离右边多远），这些偏移都是基于定位的方式来决定的，定位方式的不同会影响偏移的方向不同！
定位的实现
定位需要至少两行代码才能看得到效果：如position:relative; 和 top:10px;
首先定位需要确定定位方式，再确定定位偏移；如果只有定位没有偏移是无法实现效果的，反之也同理；
代码例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位的实现</title>
<style>
div {
width: 300px;
height: 300px;
background-color: royalblue;
/* 定位为相对定位 */
position: relative;
/* 定位偏移为100px */
left: 100px;
}
</style>
</head>
<body>
<div>定位的实现</div>
</body>
</html>
运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：
静态定位（static）
静态定位是position:static;网页默认的定位方式，即无定位；这种在实际开发中算是很少用的，如果设置为static则定位偏移不起效果
例子代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态定位</title>
<style>
div {
width: 400px;
height: 400px;
background-color: blueviolet;
/* 定位为静态定位 */
position: static;
/* 定位偏移不起效果 */
left: 100px;
}
</style>
</head>
<body>
<div>静态定位</div>
</body>
</html>
运行结果（之所以四周有一点点小偏移是因为没有清除元素的内外边距，下同！）：
总结（各定位之间的比较）
| 定位方式 | 相对偏移位置 | 是否脱离标准流 |
|---|---|---|
| 静态定位 | 浏览器 | 否 |
| 相对定位 | 自身原来的位置 | 否 |
| 绝对定位 | 存在定位的祖先元素，若无则相对浏览器 | 是 |
| 固定定位 | 浏览器 | 是 |
| 粘性定位 | 浏览器 | 否 |
其他定位请阅读本文子篇章，开头附有链接！
9045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
