css的position:absolute

绝对定位的特性: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;
}

          

                      

                 

原文地址:https://www.cnblogs.com/zhangxinxin111/p/4708672.html