定位布局
1、目的(应用):让目标(要被布局的)标签在指定参考系下任意布局
2、定位的语法
position: static | relative | absolute | fixed
布局方位：left | right | top | bottom
1.通过position设置定位是否开启
static：静态，未定位（默认值）
relative: 相对定位, 未脱离文档流
absolute: 绝对定位, 完全脱离文档流
fixed: 固定定位, 完全脱离文档流
2.定位开启后,四个定位方位便会开启,且四个方位均参与布局
如果发生冲突,左右取左,上下取上
3、相对定位（relative）
可以看做元神出窍 , 肉体在原来的位置 , 现在的位置是灵魂
① 未脱离文档流
② 以自身原有位置作为参考坐标系
3.参考系:相对定位参考系为自身原有位置
4.left=-right top=-bottom,同时存在,左右取左,上下取上
相对定位好处:父级不会脱离文档流,满足所有的盒模型布局
总结:方位布局就是 显示区域上|下|左|右距离自身原始位置上|下|左|右的间隔
4、绝对定位（absolute）
① 脱离文档流
② 以最近定位父级作为参考坐标系
绝对定位好处:如果自身已经采用绝对定位布局了,那么子级一定参考自身进行定位
如果父级只是辅助子级进行绝对定位,那么一定优选相对定位,因为绝对定位会产生新的BFC,导致盒模型布局会受影响
注:margi-top|left依旧起作用,只是sup已经脱离文档流,不会获得到body宽度,所以auto没有参考值
5、固定定位（fixed）
① 脱离文档流
② 以文档窗口作为参考坐标系
比如网站上的那些广告 , 不管怎么滚动滚动条 , 广告还是在那个位置用的就是固定定位 .
6. z-index
脱离文档流的标签,具有z-index属性,可以用来控制显示层次的优先级,值为任意正整数
7. 实例
一个盒子box里面装了三个小盒子d1 , d2 , d3
需求1:d1,d2,d3均为box的一半大小
需求2:d1左上角,d2居中,d3右下角
需求3:d2区域在最上方(会覆盖d1,d3的重叠部分)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 400px;
height: 400px;
background-color: red;
position: relative;/* 开启相对定位来辅助子集绝对定位 */
}
.d1{
width: 200px;
height: 200px;
background-color:blue;
}
.d2{
/*显示中间*/
width: 200px;
height: 200px;
background-color: orange;
position: absolute;/*绝对定位*/
top: calc(50% - 100px);
left: calc(50% - 100px);
z-index: 666;/*使d2显示优先级最高 , 显示在d1与d3上面*/
}
.d3{
/*显示在右下角*/
width: 200px;
height: 200px;
background-color: black;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="box">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
</div>
</body>
</html>
