css定位属性position层级z-index的概念

相对定位：

1、相对于它原来的位置进行位置变化，

2、原来的位置还保留着

绝对定位：

1、相对于离他最近的，有定位属性的父级元素进行定位

2、它原来的位置不再保留

1、z-index基础

　　z-index含义：指定了元素及其子元素的”z顺序“，而”z顺序“可以决定元素的覆盖顺序。z-index值越大越在上面。

　　z-index值：auto（默认值）；integer（整数值）；inherit（继承）。

　　z-index基本特性：①支持负值；②支持CSS3 animation动画；③在CSS2.1时代，需要和定位元素配合使用。

2、z-index与定位元素

　　z-index值越大越在上面。

　　如果定位元素z-index发生嵌套：祖先优先原则，前提是祖先的z-index值是数值，不是auto

3、层叠上下文与层叠水平

　　层叠上下文：是HTML元素中的一个三维概念，表示元素在z轴上的层叠表现。

　　具有层叠上下文的元素：①页面根元素天生具有层叠上下文，称之为”根层叠上下文“；②z-index值为数值的定位元素也具有层叠上下文；③其他属性

　　层叠水平：层叠上下文的每个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠准则。层叠水平和z-index不是同一个东西，普通元素也有层叠水平。

　　层叠上下文特性：①层叠上下文可以嵌套，组合成一个分层次的层叠上下文；②每个层叠上下文和兄弟元素独立，当进行层叠变化或渲染的时候，只需要考虑后代元素；③每个层叠上下文是自成体系的，当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

4、层叠顺序

　　含义：元素发生层叠时候有着特定的垂直显示顺序。

　　著名的7阶层叠水平：

#box2{

/*相对定位*/

position: relative;

left: 100px;

top: 50px;

/*绝对定位*/

position: absolute;

left: 100px;

top:50px;

/*只有定位属性position才有层级z-index的概念*/

/*可以决定当元素发生覆盖的时候,哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个*/

z-index: 6;

}

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知