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