zoukankan      html  css  js  c++  java
  • 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相同(处于同一平面的定位元素)的层叠关系:后来者居上

  • 相关阅读:
    Best Time to Buy and Sell Stock III
    Valid Palindrome
    Longest Substring Without Repeating Characters
    Copy List with Random Pointer
    Add Two Numbers
    Recover Binary Search Tree
    Anagrams
    ZigZag Conversion
    Merge k Sorted Lists
    Distinct Subsequences
  • 原文地址:https://www.cnblogs.com/dsmf/p/6991018.html
Copyright © 2011-2022 走看看