相对定位：
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/post/7101.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知