期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

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,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册