zoukankan      html  css  js  c++  java
  • 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;
    }

              

                          

                     

  • 相关阅读:
    unity配置Android SDK,并构建导出apk格式
    eclipse安装Android插件
    jQuery常用事件详解
    jQuery的DOM操作小案例
    jQuery的DOM操作详解
    jQuery九类选择器详解
    jQuery简单入门
    JS表单前台校验模板
    SSH框架整合(全注解)
    SSH框架整合(XML)
  • 原文地址:https://www.cnblogs.com/zhangxinxin111/p/4708672.html
Copyright © 2011-2022 走看看