zoukankan      html  css  js  c++  java
  • css z-index使用注意事项

    写css z-index的时候经常会出现很多莫名其妙的问题,下面对z-index属性做彻底的剖析,本文参考了《一个css中z-index的用法》,并做了很多demo,方便了解z-index的用法.

    一、z-index是什么

     z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。为了更清晰的描述Z-index是如何工作的,这张图片夸大展示了层叠元素在视觉位置上的关系。

      

    二、自然层叠顺序demo

    为了更好的表现出最基本的层叠,看下面的demo,地址 http://jsbin.com/yezisino/1/edit

    html代码:

    <div class="blue"></div>
    <div class="green"></div>
    <div class="red"></div>

    css:

    复制代码
    .blue,.green,.red{
          200px;
          height:200px;
        }
        .blue{
          background:blue;
        }
        .green{
          background:green;
          margin-top:-100px;
          margin-left:50px;
        }
        .red{
          background:red;
          margin-top:-100px;
          margin-left:100px;
        }
    复制代码

    效果图:

      

    三、验证z-index

    为了验证z-index的作用,对上述代码进行修改,实例如下

      

    分别把blue green  red的z-index设置为999   99   9,但是看上去好像和之前没什么变化,原因是因为Z-index只能工作在被明确定义了absolute,fixed或relative 这三个定位属性的元素中。so 我们继续对css做一些修改:

      

    如图所示,显示的顺序已经按照我们设置的z-index大小展现了

    四、多个父元素中子元素的z-index设置

      在原基础之上,我们对html和css做一些改动,验证一下父元素不同的情况下 ,子元素设置不同的z-index显示效果

      

    可以很明显的看出,不同父元素的子元素之间进行显示时,会根据父级元素的z-index进行渲染.

    五、世上本没有z-index

    要有这样子的意识:absolute是一个能够独当一面的属性,其使用可以不要relative,当然,也可以不使用z-index。在默认情况下,元素应用了非staticposition属性后,其就会有一个隐晦的层级,会居于普通元素之上,无需额外设置z-index属性值。

    然而,眼观现实世界,z-index属性值的滥用跟absolute属性值的滥用有的一拼——只要用到绝对定位/相对定位的地方就要设置一个z-index值,以表示自己的地位。结果,N多个z-index之后,网站前端换人之后,页面的z-index层级混乱了,为了让新添加元素上面显示,不惜设置z-index的值为999或是9999等。这就好比球队,人人都想当老大,最后结果是个很有味道的屎。

    转自https://www.cnblogs.com/teamobaby/p/3840226.html

  • 相关阅读:
    视频高清直播RTMP视频推流组件EasyRTMP-IOS版如何使用wchar_t*类型参数?
    设计模式
    算法学习【第10篇】:算法之动态规划问题
    算法学习【第9篇】:算法之斐波那契数列
    算法学习【第8篇】:贪心算法找零问题
    算法学习【第7篇】:算法之迷宫问题
    算法学习【第6篇】:算法之数据结构
    算法学习【第5篇】:常用排序算法(*******)
    算法学习【第4篇】:算法之---堆的简单介绍
    算法学习【第3篇】:树和二叉树简介
  • 原文地址:https://www.cnblogs.com/wuchaofan1993/p/10194732.html
Copyright © 2011-2022 走看看