position定位
学习position，了解一下标准流，定位和参数，实现网页布局和层级
2.1 文档流
HTML中的三种布局方式
- 标准流
- 浮动
- 定位
标准流是网页中默认的布局方式，即顺序布局。
HTML中的两大元素：
块级元素有：div，H1~H6，有序无序列表（ol,ul,li)，table表格，p段落
内联元素有：a,span,img,input
块级元素总是独占一行的，而内联元素是和相邻的元素同在一行，如果一行内宽度不够用，才被挤到下一行
除了标准流中的布局之外，还有其他的定位方式(position定位和float)
2.2 position-relative
position属性的意义
positon属性决定了元素将如何定位
通过top、right、bottom、left实现位置的改变
position中的可选参数：
static、(是positon属性中的默认值，按照标准流的方式进行正常排列）
relative、（相对定位，使用了relative的元素处于正常的文档流中，但是可以通过top、right、bottom、left改变元素的位置）
absolute、
fixed、
inherit
如下所示的代码，使用了relative定位
<!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>
.div1 {
width:100px;
height:100px;
background: red;
position: relative;
left: 0;
top:100px;
}
.div2 {
width: 100px;
height: 100px;
background: blue;
position: relative;
left: 0;
top:-50px
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
后写的元素会覆盖先写的元素，后写的带有定位属性的元素大于先写的定位元素的层级。top,left以网页的左上角为原点，后侧，和下侧为正方向；bottom,right以网页的左上角为原点，左侧，和上侧为正方向
2.3 postion-absolute
使用了绝对定位的元素，配合使用了top、right、bottom、left参数，元素将脱离正常的文档流，在整个网页中都是可以进行移动定位的。
没有给test元素设置position为absolute属性的时候，是可以看到body的高度的，设置了之后，就看不到body元素的高度了。
设置absolute的定位属性，表示已经脱离了文档流。
当没有设置 test的元素的定位特性(left，top,bottom,right）时候， test元素和bro元素按照标准流的方式排列。
修改test元素的left和top属性，发现test元素已经可以覆盖到bro元素，并且根据左上角进行定位了。
left和top属性表示以左上角为原点，开始定位
right和top属性表示以右上角为原点，开始定位
left和bottom属性表示以左下角为原点，开始定位
right和bottom属性表示以右下角为原点，开始定位
如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>postion</title>
<style>
* {
margin:0;
padding:0;
}
.test {
width:100px;
height: 100px;
background: red;
position: absolute;
left: 100px;
top:50px;
}
.bro {
width: 100px;
height: 100px;
background: blue;
}
body {
height:3000px;
};
</style>
</head>
<body>
<div class="bro"></div>
<div class="test"></div>
</body>
</html>
如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>postion</title>
<style>
* {
margin:0;
padding:0;
}
.test {
width:100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
top:0px;
}
.bro {
width: 300px;
height: 300px;
background: blue;
margin-left: 200px;
margin-top: 200px;
}
body {
height:3000px;
};
</style>
</head>
<body>
<div class="bro">
<div class="test"></div>
</div>
</body>
</html>
当带有position属性的定位元素（test元素），的父元素（bro）或者主元素没有定位属性时候（没有positon属性），默认以窗口的左上角为原点进行定位。
2.3 postion-fixed
固定定位，即使用了fixed参数的元素，配合top、right、bottom和left属性，元素会脱离正常的文档流，不受制于标准流的约束。在整个窗口进行一段定位，并拥有层级的概念。
带有固定定位的元素，将在整个窗口进行位置移动。常用的使用场景有：1、对联广告；2、登陆弹窗
固定位置的元素，将一直保存在固定的位置（左上角），无论窗口怎么移动，如下代码
任何元素对于固定定位，是没有约束力的，这和绝对定位是有区别的。
带有fix属性的元素，不管父元素有没有定位的属性，都不受制于父元素。如下代码所示：test元素是不受制于父元素的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>postion</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
.per {
width: 300px;
height: 300px;
background: blue;
position: absolute;
left: 300px;
top:300px;
}
.test {
width: 100px;
height: 100px;
background: red;
position: fixed;
left: 100px;
top:100px;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
</div>
</body>
</html>
2.4 postion-inherit
继承属性，子元素继承父元素的属性，
如下图代码，父元素(per)设置position为relative。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>postion</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
.per {
width: 300px;
height: 300px;
background:blue;
position: relative;
}
.son {
width: 100px;
height: 100px;
background: red;
position: inherit;
left: 100px;
top:100px;
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
父元素(per)设置position为fixed之后，子元素也会继承，如下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>postion</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
.per {
width: 300px;
height: 300px;
background:blue;
position: fixed;
left: 200px;
top: 200px;
}
.son {
width: 100px;
height: 100px;
background: red;
position: inherit;
left: 100px;
top:100px;
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
