• css中position的使用


    [相对定位 relative]
    1、使用position: relative; 设置元素为相对定位的元素;

    2、定位机制:
         ① 相对于自己原来文档流中的位置定位,当不指定top等定位值时,不会改变元素位置;
         ② 相对定位元素,仍会占据原有文档流中的位置,而不会释放。
     3、使用top、left、bottom、right调整位置。当left和right同时存在,left生效,当top和bottom同时存在,top生效。

    [绝对定位 absolute]
    1、使用position: absolute;设置元素为绝对定位元素。
     2、定位机制:
            ① 相对于第一个非static的祖先元素(即使用了relative/absolute/fixed定位的祖先元素)进行定位。
            ② 如果所有祖先元素均未定位,则相对于浏览器左上角定位;
            ③ 使用absolute的元素,会从文档流中完全删除,原有空间释放不再占有;

    注:绝对定位absolute容易破坏父容器的位置,有时不经意就会带着父容器移动,破坏网页的布局,所以在用的时候,要小心一些使用,避免破坏网页布局

    [固定定位 fixed]

    1、position: fixed; 是一种特殊的绝对定位,父容器无法使用relative

    2、定位机制:永远相对于浏览器进行定位。

    注:固定定位在网页布局中常用于联系方式,客服等要一直出现的东西,无论页面滚动到哪,都会一直出现

     [z-index 属性]
    1、作用:设置定位元素的Z轴层叠顺序
     2、使用要求:① 必须是定位元素才能使用。relative/absolute/fixed
                   ② 使用z-index需要考虑父容器的约束。
                    如果父容器为z-index:auto,则子容器的z-index可以不受父容器的约束;
                    如果父容器z-index进行了设置,则子容器的层叠将以父容器的z-index为准(在同一父容器的不同子元素,仍可以通过自己的z-index调整层叠关系)。

     3、z-index:auto & z-index:0 的异同:
          ① z-index:auto为默认值,与z-index:0处于同一平面。
         ② z-index:auto,不会约束子元素的z-index层次,而z-index:0,会约束子元素必须与父元素处于同一平面。
     
     4、z-index相同(处于同一平面的定位元素)的层叠关系:后来者居上

  • 相关阅读:
    列表数据类型内置方法
    WIN7局域网文件共享设置方法
    Python中if __name__ == '__main__':作用
    python练习2
    python练习1
    在centos6上面安装python3.4
    TCP连接之未连接队列的理解
    薛定谔把妹法
    js获取设备公网ip + 服务器根据公网ip 获取IP信息
    js获取设备内网ip
  • 原文地址:https://www.cnblogs.com/dsmf/p/6991018.html
Copyright © 2020-2023  润新知