首页 > 代码库 > css中position的使用

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

 

css中position的使用