CSS定位的一些个人理解
本人是还没有入门的技术小白，仅以此篇记录成长，欢迎大家一起讨论学习，也欢迎在评论区指出问题~~
言归正传啦，以下是关于CSS中定位的个人理解。
一、分类
在CSS中定位分为：static静止定位、relative相对定位、absolute绝对定位、fixed固定定位、inherit继承定位。本文主要讨论相对定位，绝对定位与固定定位。
二、应用
（1）相对定位
相对自己的原始位置定位
就是在没添加定位前，它已经占了一个位置了，应用相对定位后，是相对于它本来该在的位置上下左右移动。但是它之前的位置还是给它留着的。之前看到有人给相对定位比喻成进城打工的人，虽然进城了，但是老家还是有房子的，不会因为人进城打工，老家的房子就没了。下面引入代码，大家可以运行一下感受相对定位。
先做一些准备
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
*{
margin: 0;/*去掉系统自带的一些边距*/
padding: 0;
}
.big{/*为了看上去比较直观，我们定义了一个大盒子和小盒子*/
width: 1000px;
height:1000px;
background-color: gray;
}
.small{
width: 300px;/*定义一个边长为300像素的黄色小正方形*/
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="big">
<div class="small">
</div>
</div>
</body>
</html>
没加定位之前是酱紫的
现在我们给黄色小正方形加入相对定位
.small{
width: 300px;/*定义一个边长为300像素的黄色小正方形*/
height: 300px;
background-color: yellow;
position: relative;/*注意这里啦*/
top:20px;
left: 20px;
}
运行出来是这样的啦可以看出相对于原来的位置挪动啦
（2）绝对定位
相对于最近的非static 定位的祖先元素定位
这听上去有点绕，难懂。首先，绝对定位是相对于祖先元素定位，祖先元素就是父元素，爷爷元素，太爷爷元素等等等等啦，总之就是上一级元素，在说相对定位的时候，灰色盒子就是黄色盒子的父元素。再者，这个祖先元素是非static的定位元素，那么就是说祖先元素要有定位，还不能是static定位，那我们可能会疑惑了，如果父元素没有定位怎么办？？答案是找爷爷，也就是上级元素没有定位，就找上上级，那我们可能又有疑惑了，如果祖先元素都没有定位，那怎么办丫!!!答案是相对于body定位。这里要说一下，绝对定位之后，原来的位置就没有了，就像去城里打工的人赚钱了，举家搬迁到城里。
所以，现在情况很明朗了，绝对定位分为两种情况
1、祖先元素有定位（子绝父相）
2、祖先元素没定位
先说第一种,在祖先元素有定位时，我们最常用的是子绝父相，及儿子是绝对定位，父亲是相对定位。
给之前的灰色大盒子添加相对定位，黄色盒子添加绝对定位
.big{/*为了看上去比较直观，我们定义了一个大盒子和小盒子*/
width: 1000px;
height:1000px;
background-color: gray;
position: relative;/*这里这里*/
top: 100px;
left:150px;
}
.small{
width: 300px;/*定义一个边长为300像素的黄色小正方形*/
height: 300px;
background-color: yellow;
position: absolute;/*这里这里*/
top:20px;
left: 20px;
}
就是这亚子的效果啦，小盒子始终是和大盒子保持相应的距离。
下面说祖先元素没有定位
.big{/*为了看上去比较直观，我们定义了一个大盒子和小盒子*/
width: 1000px;
height:1000px;
background-color: gray;
/*position: relative;
top: 100px;
left:150px;*/
margin-top: 100px;/*这里加了边距是为了更直观的看出，小盒子不再是相对于大盒子定位了*/
margin-left: 100px;
}
.small{
width: 300px;/*定义一个边长为300像素的黄色小正方形*/
height: 300px;
background-color: yellow;
position: absolute;
top:20px;
left: 20px;
}
这里可以看出黄色方块不再根据灰色方块定位了，而好像是相对于浏览器左上角，其实严格来说并不是相对于浏览器，而是相对于body，相对于body要如何去理解呢，比如说一个文档，很长很长，浏览器中我们肯定是要借助于滚动条来浏览的，因为浏览器的窗口那么大，我们说的body就是浏览器里的文档，也可以说是文档里的内容。我们看到的关于左上角定位，其实也不是固定的，当我们把posision的值修改成bottom:20px;right:20px;就会变成右下角。
（3）固定定位
相对于浏览器（屏幕视口）定位
这里就是可能会容易和绝对定位的第二种情况混淆，其实区别是很大很大的，上面也说过了，绝对定位第二种情况是相对于内容，而固定定位是确确实实的相对于浏览器窗口。那么这种所带来的区别在视觉上会产生什么样的差异呢，就是绝对定位第二种情况会随着内容的滚动而滚动，但是固定定位不会，浏览器窗口就那么大，它就固定在那不动，不论内容滚动到哪儿，最形象的例子是屏幕底下的小广告，不管你内容翻到哪，它就像狗皮膏药一样赖在那。
这里主要说和绝对定位的区别，因为是动态的所以不发运行结果图啦~给大家一段代码，大家可以运行之后自行体会~
运行之后要滑动滚动条哦~~
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
*{
margin: 0 ;
padding: 0;
}
body{
width: 1000px;
height: 5000px;
}
.big{/*为了看上去比较直观，我们定义了一个大盒子和小盒子*/
width: 1000px;
height:1000px;
background-color: gray;
position: absolute;
top: 100px;
left:150px;
}
.small{
width: 300px;/*定义一个边长为300像素的黄色小正方形*/
height: 300px;
background-color: yellow;
position: fixed;
bottom:20px;
right: 20px;
}
</style>
</head>
<body>
<div class="big">
</div>
<div class="small">
</div>
</body>
</html>
好啦~~定位就分享到这，其他类型的定位用的不多，所以就不赘述啦~
希望这篇文章可以帮助到大家，也希望自己可以逐渐成长起来~
本文如果有任何问题，欢迎评论区讨论交流~