定位position小记
By Leaf
定位是css布局的核心，在项目中很多地方都需要用到定位，这里做一个小结，便于记忆查询。
定位position的属性有4个：
- static（静态定位或默认定位）
- relative（相对定位)
- absolute (绝对定位)
- fixed (固定定位)
一、静态定位 position:static
所有的元素都具有position，最初的默认值就是static,不会被特殊定位。即：设置了top\right\bottom\left也不受影响，不会偏离原来的位置。如果元素设置了position的其他属性（relative、absolute\fixed），那么就会覆盖默认的static。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-static静态定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 800px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">leaf-2</div>
<div class="leaf-3">leaf-3</div>
</div>
</body>
</html>
最后显示效果：
static-默认定位
二、相对定位 position:relative
- 相对定位，是相对元素原来的位置发生偏移；
- 本身不脱离文档流；
- 必须配合位置属性top\right\bottom\left来使用，但是垂直方向（top\bottom）,水平方向（right\left）中两个值只能选一个。如果同时设置了top和bottom，会根据优先级选择top或left；
- 可能会覆盖在其他元素上边；
下面将第二个div（.leaf-2）设置相对定位relative:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-relative相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 800px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
/* leaft-2设置相对定位 */
.leaf-2{
position: relative;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">leaf-2</div>
<div class="leaf-3">leaf-3</div>
</div>
</body>
</html>
最后效果：
relative-相对定位
有图可以看出，.leaf-2这个div设置成position:relative定位之后，①只是相对于它原来的位置发生了一个偏移。②同时它在文档中的位置还是保留的，并没有脱离文档流。③覆盖在.leaf-3上（因为leaf-3没有设置定位属性，所以会被覆盖，可以通过z-index来解决这种覆盖问题）。
三、绝对定位 position:absolute
-
绝对定位，绝对定位的元素根据
①是否有父元素或祖先元素、②祖先元素是否设置了定位（相对定位、绝对定位）为参考点。有以下几种情况：
1）绝对定位元素没有祖先元素，默认body为其祖先元素，绝对定位元素相对于文档的body元素定位；
2）有祖先元素，但是祖先元素没有设置定位，绝对定位元素相对于文档的body元素定位
3）有祖先元素，祖先元素设置了定位，则绝对定位元素就会以具有定位流的祖先元素为参考点；
4）有祖先元素，并且祖先元素中有多个元素都是定位流，那么绝对定位元素采取“就近原则”就会以离它最近具有定位流的祖先元素为参考点。总结为一句话就是：
绝对定位，相对于最近的具有position（absolute、relative、staic）的祖先元素定位。 -
脱离文档流
下面我们根据以上说的情况来分别写一下demo：
1.绝对定位元素没有祖先元素，绝对定位元素相对于文档的body元素定位
新增加一个没有父元素的.leaf-4的div,并设置为绝对定位具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-absolute绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 800px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
.leaf-4{
width: 200px;
height: 100px;
border: 1px solid rgb(4, 0, 255);
font-size: 30px;
/* 设置绝对定位 */
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">leaf-2</div>
<div class="leaf-3">leaf-3</div>
</div>
<div class="leaf-4">leaf-4没有祖先元素</div>
</body>
</html>
最后效果：
没有祖先元素
因为leaf-4没有父元素，它的默认祖先元素就是body,所以它是以body为参考点的，相对body来定位，向下和向右各偏移了20px。
2.有祖先元素，祖先元素设置了定位，则绝对定位元素就会以具有定位流的祖先元素为参考点；
下面将具有父元素的leaf-2设置成绝对定位，父元素没有设置定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-absolute绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 800px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
/* leaf-2设置绝对定位，父元素不设置定位*/
.leaf-2{
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">leaf-2</div>
<div class="leaf-3">leaf-3</div>
</div>
</body>
</html>
有有祖先元素，但不设置定位
这时，将leaf-2的父元素设置定位（relative或absolute）：
/* leaf-2设置绝对定位，父元素设置定位*/
#wrapper{
position: relative;
/* position: absolute; */
}
.leaf-2{
position: absolute;
top: 20px;
left: 20px;
}
最后效果：
有祖先元素，且设置了定位
由此，可以看出leaf-2相对它的父元素发生了偏移，且脱离了文档流，直接从文档流中移出来了，类似float的效果。
3.有祖先元素，并且祖先元素中有多个元素都是定位流，那么绝对定位元素采取“就近原则”就会以离它最近具有定位流的祖先元素为参考点。
在leaf-2增加一个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-absolute绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 800px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
/* leaf-2设置绝对定位，父元素设置定位*/
#wrapper {
position: relative;
}
.leaf-2 {
position: absolute;
top: 20px;
left: 20px;
}
/* leaf-2-son设置绝对定位，它的所有父元素都设置了定位 */
.leaf-2-son{
width: 50px;
height: 50px;
background: blue;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="wrapper_outer">
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">
<div class="leaf-2-son">
son
</div>
</div>
<div class="leaf-3">leaf-3</div>
</div>
</div>
</body>
</html>
最后效果：
有祖先元素，具有多个定位流
由图，leaf-2-son相对于最近的具有定位的祖先元素leaf-2发生了定位。
在企业开发中一般不单独使用相对定位和绝对定位，而是结合一起使用。一般“子绝父相”，即子元素用绝对定位，父元素用相对定位。但凡说到定位或一个盒子覆盖在另一个盒子上都要想到
“子绝父相”。
一般的应用场景都用于对元素进行微调或类似下图”New“这种：
定位应用场景.png
四、固定定位 position:fixed
- 固定定位position:fixed和绝对定位有点相似，相对于视窗来定位,但是固定定位的元素的位置不会随着页面滚动条而发生变化，元素还是停留在原来位置，固定在页面中。
- 脱离文档流
固定定位一般的应用场景：
固定的顶部（如导航条）、固定的底部、遮罩层、返回顶部、一直固定居中在页面的新弹框等，只要不随着页面滚动条变化的一般都采用fixed布局。
附：这里有一个之前写的fixed应用场景-遮罩层的小笔记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>positon定位-absolute绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
height: 2000px;
background: yellow;
margin: 0 auto;
}
.leaf-1,
.leaf-2,
.leaf-3 {
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 30px;
}
#wrapper {
position: relative;
}
.leaf-2 {
position: absolute;
top: 20px;
left: 20px;
}
.leaf-2-son{
width: 50px;
height: 50px;
background: blue;
position: absolute;
top: 20px;
left: 20px;
}
/* 为了更好的看到效果可以将#wrapper的高度设置成2000px,
然后将leaf-3设置fixed固定定位，不随滚动条的滚动而改变 */
.leaf-3{
position: fixed;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="wrapper_outer">
<div id="wrapper">
<div class="leaf-1">leaf-1</div>
<div class="leaf-2">
<div class="leaf-2-son">
son
</div>
</div>
<div class="leaf-3">leaf-3</div>
</div>
</div>
</body>
</html>
最后效果：
fixed定位，不随滚动条滚动而变化
由此，可以看到不管如何滚动条如何变化，leaf-3的位置都是一直在右下角，不随着滚动条的滚动而发生改变。
最后将以上内容简单总结了一个表格：
| relative | absolute | fixed | static |
|---|---|---|---|
| 相对于自身原来的位置发生偏移 | 相对最近的具有定位流的祖先元素定位 | 相对于视窗定位，位置不随滚动条变化而变化 | 不会被特殊定位 |
| 不脱离文档流 | 脱离文档流 |
脱离文档流 |
不脱离文档流 |
| 应用场景： "子绝父相"配合使用，用于元素的微调 | "子绝父相"配合使用，用于元素的微调 | 固定导航栏、顶部、遮罩层等 | 元素的默认值 |
这里只是将之前凌乱的笔记重新做一个梳理、总结，便于温习与查阅。可能会有错，望大神指正！
