三种定位方式以及兼容性问题——2018-01-28
2018-01-28 本文已影响0人
不2青年
一、相对定位：positive：relative；
1、不影响元素本身的特性。
2、不会使元素脱离文档流。
3、如果元素没有添加定位偏移量，那么对元素本身没有任何影响。
4、定位偏移量是相对于元素当前的位置来说。
定位元素偏移量：
top/right/bottom/left，支持可以使用像素也可以使用百分数。
二、绝对定位：positive：absolute；
1、使元素完全脱离文档流。
2、使内嵌元素支持宽高。
3、块属性元素内容撑开宽度。
4、元素偏移量是相对于“定位父级”来说的。
定位父级：
定位父级指的是被添加绝对定位的元素的所有上层元素中第一个被添加定位的元素（距离该元素最近的被添加定位的元素）。
<body>
<div class="box1" style="position: relative;">
<div class="box2">
<div class="box3" style="position: absolute;">
XXXXXX
</div>
</div>
</div>
</body>
box3的定位父级是box1而不是box2，但是box3的元素父级只有一个，就是box2。
三、固定定位：position：fixed；
与固定定位的特性基本一致，差别就是始终对整个文档进行定位。
弊端：IE6不支持固定定位。
四、应用：
1、在使用过程中大部分都是绝对定位与其他定位配合使用，比如腾讯视频的登录界面：
demo.png
登录框与蒙版全部脱离文档流，全部添加绝对定位，蒙版部分定位在整个文档，登录界面定位在蒙版的中心。
注意：margin，padding与定位是可以一起使用的，对于上面登录界面的定位:
.login{
...
/*定位部分*/
position:absolute;
left:50%;
top:50%;
margin-top:-height px;
margin-right:-width px;
...
}
2、清浮动
一般当父级元素没有浮动但是里面的内容浮动了就要清浮动，但是当父级元素是定位元素是可以不用清浮动，因为定位本身就有清浮动的效果。
五、兼容性问题（IE6）
1、当父级元素宽或者高小于子级元素时，我们一般会在父级元素上添加overflow：hidden；来处理，使得超过父级元素的都被裁去。
但是在IE6下，如果自己元素被添加了相对定位，那么父级的overflow：hidden；就包不住子集元素了。
处理办法：给父级元素也添加相对定位。
2、在IE6下定位元素的父级宽高都为奇数，那么在IE6 下定位元素的right和bottom都有一个像素的偏差。
