一:预热回顾
1.CSS中每个元素都有定位特性,默认为static!
2.参照物 坐标系 坐标系单位(百分比、px)
absolute:若祖先标签不具备参照物特质(position:relative、absolute),则以浏览器窗口边框 html进行定位。
脱离文档流
relative: 以原始位置为参照物进行偏移。
没有脱离文档流, 之前的位置依然占用哦! 设置高度后会撑开父元素的高度哦。
相对定位覆盖文档流。 相对定位元素之间也存在覆盖现象哦!
相对单位top属性用百分比无效? 那就用px! left、right属性就没这个问题哦! why?
答:因为百分比是相对单位,是参照父元素的值决定的,因为在浏览器中,body的默认高度,并不是浏览器的可视区域高度。但是body的默认 宽度是浏览器的可视区域宽度。所以,body的高度是0px,20%也是0了。
所以用相对单位的时候一定要看父元素有无高度哦!不是默认高度哦 ! 相对单位都是从父元素那里继承的高度哦!
3.top、left等值是可以取负值的哦!
方案一:定位实现 二次定位哦(曲线救国)!
#wrap{
position: absolute; /* 绝对定位元素作为定位参照物哦 */
left:50%;
top:50%;
width:200px;
height:100px;
border:1px dashed blue;
}
#box{
position:absolute;
left:-50%;
top:-50%;
width:200px;
height:100px;
background:red;
}
<div id="wrap">
<div id="box"></div>
</div>
方案二: js实现
思路:可以这么做,在加载页面的时候执行个js方法;把div的左间距设置为浏览器当前的宽度减去div宽度的一半,
上下的话: 就把上间距设置为浏览器当前的高度减去div高的一半;
其他: http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/