zoukankan      html  css  js  c++  java
  • CSS层叠上下文/层叠等级

    什么是“层叠上下文”

    层叠上下文(stacking context),是html中一个三维的概念。在css2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴,Y轴以及表示层叠的Z轴。一般情况下,元素在页面上沿X轴Y轴平铺,我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠,这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

    什么是“层叠等级”

    层叠等级(stacking level,叫“层叠级别”/“层叠水平”也行)

    在同一个层叠上下文中,它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。

    在其他普通元素中,它描述定义的是这些普通元素在Z轴上的上下顺序。

    z-inx为正 > z-index为0 > 行内元素 > 浮动元素 > 块级元素 > z-index为负 > bk/border

    层叠顺序示意图:(在同一层叠上下文中,层叠顺序才有意义)

    广州vi设计公司 http://www.maiqicn.com 我的007办公资源网 https://www.wode007.com

    实例:

     
    <!-- 因为在同一层叠上下文中优先级为:行内元素>浮动元素>块级元素,因此span中的字符会完整展示出来 -->
     <div>
        <div style="border:1px blue solid;  50px; height: 50px; background-color: blue">
            <div style="border:1px black solid;  50px; height: 30px; float: left; background-color: black">
                <span style="border:1px red solid; 6666666666666666</span>
            </div>
        </div>
    </div>
  • 相关阅读:
    update set from 语句用法
    SQL WITH AS用法
    SQL插入数据的多种方式
    本地临时表“#” 与 全局临时表 "##"
    sql常用语句
    关于mybatis转义SQL动态执行语句变慢的原因
    关于SQL中OUTER APPLY 得用法
    AspNetPager控件的简单使用
    JQuery常用的案例
    JQuery的学习笔记
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13673356.html
Copyright © 2011-2022 走看看