绝对定位的特性:1.绝对定位的元素以前所占空间会释放,脱离普通文档流,在层级上是最上层的,所以会覆盖html里它的下面的元素。
用途:不用relative限制absolute,(有利于样式的复用),a.实现一个小东西在一个块上。
2.绝对定位的元素有位置跟随的特性,即跟随它html结构里的上一个元素(“ ”也可以)。
用途:a.用于布局写某个小东西在某元素的后面(上下左右均可),用margin调距离。
3.绝对定位后元素出现的位置和没定位时一样,可用top,right,bottom,left,margin来调整(负margin也好,兼容到IE6)。
用途:想去哪去哪,但是会覆盖其他的元素。
注意事项:用一些标签会有间距,可以在写html结构时让两个标签无间距<img></img><i></i>.
4.绝对定位的限制,受限于absolute,relative,fixed。
5.绝对定位影响浮动,若加在父元素上,则内部元素浮动无效,同级则不影响,也可以去除元素自身的浮动。
注意事项:和浮动的区别,浮动的遇到文字不会覆盖。浮动的历史为文字环绕效果。
6.绝对的布局,高100%,头和脚高固定,高有溢出部分出现滚动条。
<div class="page">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
html,body{
height:100%;//必须写,默认的body的高为0;
}
.page{
position:absolute;left:0;top:0;right:0;bottom:0;background-color:yellow;
}
.header{
position:absolute;left:0;top:0;right:0;height:100px;background-color:blue;
}
.footer{
position:absolute;left:0;right:0;bottom:0;height:100px;background-color:red;
}
.content{
position:absolute;top:100px;bottom:100px;overflow: auto;
}