zoukankan      html  css  js  c++  java
  • z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

    今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应。经过我的反复检查,发现只要给所有的div在深度上排个顺序就可以了。但是,有点投机取巧的感觉,所以想透彻的了解z-index这个属性。

      CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识。它就类似与photoshop里面图层的排列,越靠上的图层就在最前面,离我们的眼睛更近。(IE6有hack,以后再讨论)

                   图:z-index的示意图

    1.如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点。

      我刚开始,所有的div都是没有设置position的,所以是可以获取点击事件的,但是调整以后发现无法监听鼠标点击了。

    2. z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效。

    总之:记住z-index的意义,以及必须在position的条件下使用。

  • 相关阅读:
    最全负载均衡:算法、实现、亿级负载解决方案详解
    淘宝分布式架构演变案例详解
    分布式一致性协议实现原理
    ReentrantReadWriteLock的使用
    线程之单例
    线程的优先级
    java线程的6种状态
    mybatis <foreach> 标签
    java多线程 上下文切换
    docker的复制和挂载
  • 原文地址:https://www.cnblogs.com/fanfan-nancy/p/5320432.html
Copyright © 2011-2022 走看看