欢迎光临本店,登录 | 注册 |
当前位置: 首页 > 新闻动态 > 技术文章 > 网页设计 > z-index轴在css中具体使用方法
z-index轴在css中具体使用方法
黑蚁模板 / 2017-03-02

 z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。

 

原理性的东西就不说了,网上搜索一大堆,具体讲下z-index属性怎么使用。这个属性比较特别,并不是直接给div加个属性就能起作用的。需要满足2个条件:

条件一:作用的这个div的position属性不能是默认值(static默认值,没有定位);

条件二:必须是亲兄弟间的div相互比较z-index轴需要是同一个父亲);


 

下面具体说下怎么操作

作用的这个div的position属性不能是默认值

一般情况下,如果这个div需要定位的,可以选择“absolute”或“fixed”值;如果仅仅是配合z-index使用,使z-index属性起作用,可以选择“relative”值。

必须是亲兄弟间的div相互比较z-index轴(需要是同一个父亲)

龙生龙,凤生凤,老鼠儿子爱打洞,这个就是类似继承关系。

举例:两个小伙之间比较地位高低有两种情况,

A:如果他们是同一个父亲的儿子,这个两小伙谁实力强,谁的地位就高。

B:如果两小伙的父亲不是同一个人,那么这两小伙的地位就是靠父亲之间的地位高低决定的。

 

总结:

如果是同一个父级div里的子div相比较,哪个子div的z-index设置的高,哪个就排在前面;

如果是不同父级div里的子div相比较,就是这两个父级div相比较,谁的z-index设置的高,他们的父亲连同儿子地位都高。(这两个子div是不好比较的,他们的高低由父div决定)

黑蚁建站优势
拥有近10年的行业经验,CNNIC&ICANN双认证知名域名注册商,具有跨地区增值电信业务经营许可资质,高新技术企业,软件企业,民营科技企业, AAA级信用单位。
自2008年成立以来,一直保持高速成长,建站市场占有率已连续3年稳居前三甲。
  • 建站行业龙头企业

  • 十年金牌品质保证

  • 自主研发,智能建站系统

  • 国内外多个安全快速骨干机房

  • 企业邮箱,海内外收发畅通

  • 安全数据中心网络平台

  • 业务范围覆盖全国各地

  • 7*24小时专家支持服务

关于我们  发展历程  代理加盟  人才招聘  域名查询  隐私保护  联系我们
137-9112-5571