目录
1.position定位----相对定位（relative）
2.position定位----绝对定位（absolute）
3.position定位----固定定位 （fixed）
4.堆叠次序
5.行内元素设置宽高
6.居中问题
1.position定位----相对定位（relative）
相对定位的特性：
1 相对定位以元素自身的位置为基准
2 相对定位占位置
<style>
div{
width: 50px;
height: 50px;
background-color: red;
}
div:nth-child(2){
background-color: green;
position: relative;
top: 10px;
left: 50px;
}
</style>
2.position定位----绝对定位（absolute）
绝对定位特性：
1 以父级为标准移动位置
若父级没有定位，则绝对定位的盒子以文档为准
若父级有定位，则绝对定位以父级为准移动位置
2 绝对定位不占有位置
<style>
#father{
width: 350px;
height: 350px;
background-color: green;
/* 父级定位 */
position: relative;
top: 50px;
left: 50px;
}
#son{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
}
</style>
子绝父相定位
<style>
.father{
width: 500px;
height: 100px;
background-color: red;
position: relative;
}
.down{
width: 600px;
height: 200px;
background-color: #000;
}
.father>div{
width: 40px;
height: 40px;
background-color: purple;
position: absolute;
}
.son-l{
left: 0;
top: 30px;
}
.son-r{
right: 0;
top: 30px;
}
</style>
<body>
<div class="father">
father
<div class="son-l">son1</div>
<div class="son-r">son2</div>
</div>
<div class="down"></div>
</body> 
3.position定位----固定定位 （fixed）
和父级没有任何关系 会脱标
4.堆叠次序
z-index:数值 数值越大越靠上，后面不要跟单位，只能是整数
<style>
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.one{
z-index: 3;
}
.two{
top: 50px;
left: 50px;
background-color: green;
/* 数值越大越靠上 后面不要跟单位 只能是整数 */
z-index: 2;
}
.three{
top: 100px;
left: 100px;
background-color: blue;
}
</style> 
5.行内元素设置宽高
块级元素不设置width时，默认和父元素一样宽
行内设置宽度不生效，可以通过以下三种方式给行内元素设置宽高：
1 display:inline-block
2 绝对定位、固定定位
3 设置浮动
6.居中问题
横向居中：
行内、行内块、文字在块级里面横向居中：
给块级元素添加 text-align:center
行内、文字、行内块在行内块里面横向居中：
给行内块添加 text-align:center
块级在另一个块级里面横向居中：
给内部的块级加宽度(小于外部的)，同时设置 margin:0 auto
纵向居中：
行内、文字在块级里面纵向居中：
给当前的块级+line-height=当前块级元素高度 前提是 行内和文字是单行的
行内块、在块级里面纵向居中：
给当前行内块+vertical-align:middle
给外部的块级+line-height：块级的高度
不一定百分百生效
块级元素在另一个块级里面纵向居中：
只能通过定位 top 50% margin-top:-自身高度的一半
绝对居中：
第一种：
分开横向居中+纵向居中
top:50%;margin-top:-自身高度的一半
left:50%;margin-left:-自身宽度的一半
第二种
left:0;top:0;right:0;bottom:0;
margin:auto
