精华内容
下载资源
问答
  • 层叠上下文

    2021-02-25 15:15:27
    什么是层叠上下文层叠上下文即元素的z轴,层级越高越接近阅读者 什么是层叠水平? 决定同一层叠上下文中元素在z轴的显示顺序。 普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠...

    什么是层叠上下文?

    层叠上下文即元素的z轴,层级越高越接近阅读者

    什么是层叠水平?

    决定同一层叠上下文中元素在z轴的显示顺序。

    普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。

    需要注意的是,诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错,某些情况下z-index确实可以影响层叠水平,但是,只限于定位元素以及flex盒子的孩子元素;而层叠水平所有的元素都存在。

    什么是层叠顺序?

    表示元素发生层叠时有着特定的垂直显示顺序,,

    注意,这里跟上面两个不一样,上面的层叠上下文和层叠水平是概念,而这里的层叠顺序是规则。

     

    位于最低水平的border/background指的是层叠上下文元素的边框和背景色。每一个层叠顺序规则适用于一个完整的层叠上下文元素。

    原图没有呈现inline-block的层叠顺序,实际上,inline-block和inline水平元素是同等level级别。

    z-index:0实际上和z-index:auto单纯从层叠水平上看,是可以看成是一样的。注意这里的措辞——“单纯从层叠水平上看”,实际上,两者在层叠上下文领域有着根本性的差异。

    诸如border/background一般为装饰属性,而浮动和块状元素一般用作布局,而内联元素都是内容

    因此,一定要让内容的层叠顺序相当高,当发生层叠是很好,重要的文字啊图片内容可以优先暴露在屏幕上

    什么是层叠准则?

    谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-index值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。

    后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

    以上只适用于同一个层级上下文

    代码:

    ①1在2上边:

    z-index:auto所在的

    元素是一个普通的元素,于是,里面的两个妹子的层叠比较就不受父级的影响,两者直接套用层叠黄金准则,这里,两者有着明显不一的z-index值,因此,遵循“谁大谁上”的准则:

    <div style="position:relative; z-index:auto;">
        <img src="mm1.jpg" style="position:absolute; z-index:2;">    <-- 横妹子 -->
    </div>
    <div style="position:relative; z-index:auto;">
        <img src="mm2.jpg" style="position:relative; z-index:1;">    <-- 竖妹子 -->
    </div>

    ①2在1上边:

    由于两者都是z-index:0,层叠顺序这一块两者一样大,此时,遵循层叠黄金准则的另外一个准则“后来居上”,根据在DOM流中的位置决定谁在上面

    <div style="position:relative; z-index:0;">
        <img src="mm1.jpg" style="position:absolute; z-index:2;">    <-- 横妹子 -->
    </div>
    <div style="position:relative; z-index:0;">
        <img src="mm2.jpg" style="position:relative; z-index:1;">    <-- 竖妹子 -->
    </div>

     

    展开全文
  • CSS基础:CSS的上下文之层叠上下文

    万次阅读 多人点赞 2021-02-26 18:24:23
    CSS的上下文之层叠上下文 看到层叠,大家一定会联想到定位元素会是的元素之间发生“遮挡”,而z-index可以改变他们之间的遮挡优先级,但这仅仅是层叠这一概念中很小的一部分。 本文就来聊一聊css中的层叠上下文到底...

    CSS的上下文之层叠上下文

    看到层叠,大家一定会联想到定位元素会是的元素之间发生“遮挡”,而z-index可以改变他们之间的遮挡优先级,但这仅仅是层叠这一概念中很小的一部分。
    本文就来聊一聊css中的层叠上下文到底是如何给元素规定叠加顺序的。

    一、什么是层叠上下文?

    层叠上下文,英文称作”stacking context”. 我们假定用户正面向(浏览器)视窗或网页,而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开,层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

    我们可以把层叠上下文同样可以理解成是元素的属性。

    下列方式会形成层叠上下文(列举常见的方式):

    • position 值为 static 以外的值,且 z-index 值不为 auto;
    • flex (flexbox) 容器的子元素,且 z-index 值不为 auto;
    • grid (grid) 容器的子元素,且 z-index 值不为 auto;
    • opacity 属性值小于 1 的元素;
    • transform属性 不为none的元素;

    总结:

    在层叠上下文中,子元素同样也按照上面解释的规则进行层叠。 重要的是,其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

    在这里插入图片描述

    二、什么是层叠水平?

    “层叠水平”,英文称作”stacking level”,决定了同一个层叠上下文中元素在z轴上的显示顺序。网页中的每个元素都是独立的个体,他们一定是会有一个类似的排名排序的情况存在。而这个排名排序、论资排辈就是我们这里所说的“层叠水平”。

    但注意,每一个层叠上下文内部的子元素都不会突破包裹它的上下文。

    下面是引自张鑫旭大大的一段解释,我觉得很通俗易懂:

    所有的元素都有层叠水平,包括层叠上下文元素,层叠上下文元素的层叠水平可以理解为官员的职级,1品2品,县长省长之类。然后,对于普通元素的层叠水平,我们的探讨仅仅局限在当前层叠上下文元素中。为什么呢?因为否则没有意义。

    翻译成术语就是:普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。

    举例:

    大家看下面的一段代码:

    在这里插入图片描述

    现象:

    在这个例子中,每个被定位的元素都创建了独自的层叠上下文,因为他们被指定了定位属性和 z-index 值。我们把层叠上下文的层级列在下面:

    • DIV #1
    • DIV #2
    • DIV #3
      • DIV #4
      • DIV #5

    不同层的z-index他们的意义只相对于同一个层叠上下文。你会发现z-index:100的也没有覆盖z-index:1的。

    在这里插入图片描述

    结论:

    千万不要把层叠水平和CSS的z-index属性混为一谈。没错,某些情况下z-index确实可以影响层叠水平,但是,只限于定位元素以及flex盒子的孩子元素;而层叠水平所有的元素都存在。

    三、什么是层叠顺序?

    “层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序,注意,这里跟上面两个不一样,上面的层叠上下文和层叠水平是概念,而这里的层叠顺序是规则。

    在CSS2.1的年代,在CSS3还没有出现的时候(注意这里的前提),层叠顺序规则遵循下面这张图(同样是引自张大大的旧图):

    四、层叠上下文的特性

    4.1 准则

    • 谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
    • 后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。
      在CSS和HTML领域,只要元素发生了重叠,都离不开上面这两个黄金准则。因为后面会有多个实例说明,这里就到此为止。

    4.2 特性

    • 层叠上下文的层叠水平要比普通元素高;
    • 层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
    • 每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需要考虑后代元素。
    • 每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。

    讲到这里我们对层叠上下文应该有了一定理解,我们共勉~

    写在最后

    参考:

    CSS基础系列》第四篇文章

    如果对你有所帮助不妨给本项目的github 点个 star,这是对我最大的鼓励!

    关于我

    • 花名:余光
    • WX:j565017805
    • 沉迷 JS,水平有限,虚心学习中

    其他沉淀

    展开全文
  • 层叠上下文即元素在某个层级上z轴方向的排列关系。 那么这里有几个重要的概念:层叠上下文 (堆叠上下文, Stacking Context)、层叠等级 (层叠水平, Stacking Level)、层叠顺序 (层叠次序, 堆叠顺序, Stacking Order)...

    CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴。层叠上下文即元素在某个层级上z轴方向的排列关系。

    那么这里有几个重要的概念:层叠上下文 (堆叠上下文, Stacking Context)、层叠等级 (层叠水平, Stacking Level)、层叠顺序 (层叠次序, 堆叠顺序, Stacking Order)、z-index。

    1. 层叠上下文 (Stacking Context)

    文章<关于z-index 那些你不知道的事>有一个很好的比喻,这里引用一下;

    可以想象一张桌子,上面有一堆物品,这张桌子就代表着一个层叠上下文。 如果在第一张桌子旁还有第二张桌子,那第二张桌子就代表着另一个层叠上下文。

    现在想象在第一张桌子上有四个小方块,他们都直接放在桌子上。 在这四个小方块之上有一片玻璃,而在玻璃片上有一盘水果。 这些方块、玻璃片、水果盘,各自都代表着层叠上下文中一个不同的层叠层,而这个层叠上下文就是桌子。

    每一个网页都有一个默认的层叠上下文。 这个层叠上下文(桌子)的根源就是 <html></html>。 html标签中的一切都被置于这个默认的层叠上下文的一个层叠层上(物品放在桌子上)。

    当你给一个定位元素赋予了除 auto 外的 z-index 值时,你就创建了一个新的层叠上下文,其中有着独立于页面上其他层叠上下文和层叠层的层叠层, 这就相当于你把另一张桌子带到了房间里。

    层叠上下文1 (Stacking Context 1)是由文档根元素形成的, 层叠上下文2和3 (Stacking Context 2, 3) 都是层叠上下文1 (Stacking Context 1) 上的层叠层。 他们各自也都形成了新的层叠上下文,其中包含着新的层叠层。

    在层叠上下文中,其子元素按照上面解释的规则进行层叠。形成层叠上下文的方法有:

    • 根元素 <html></html>
    • position值为 absolute|relative,且 z-index值不为 auto
    • position 值为 fixed|sticky
    • z-index 值不为 auto 的flex元素,即:父元素 display:flex|inline-flex
    • opacity 属性值小于 1 的元素
    • transform 属性值不为 none的元素
    • mix-blend-mode 属性值不为 normal 的元素
    • filterperspectiveclip-pathmaskmask-imagemask-bordermotion-path 值不为none 的元素
    • perspective 值不为 none 的元素
    • isolation 属性被设置为 isolate 的元素
    • will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
    • -webkit-overflow-scrolling 属性被设置 touch的元素

    总结:

    1. 层叠上下文可以包含在其他层叠上下文中,并且一起组建了一个有层级的层叠上下文
    2. 每个层叠上下文完全独立于它的兄弟元素,当处理层叠时只考虑子元素,这里类似于BFC
    3. 每个层叠上下文是自包含的:当元素的内容发生层叠后,整个该元素将会在父级叠上下文中按顺序进行层叠

    2. 层叠等级 (Stacking Level)

    层叠等级 (层叠水平, Stacking Level) 决定了同一个层叠上下文中元素在z轴上的显示顺序的概念

    • 普通元素的层叠等级优先由其所在的层叠上下文决定
    • 层叠等级的比较只有在同一个层叠上下文元素中才有意义
    • 在同一个层叠上下文中,层叠等级描述定义的是该层叠上下文中的元素在Z轴上的上下顺序

    注意,层叠等级并不一定由 z-index 决定,只有定位元素的层叠等级才由 z-index 决定,其他类型元素的层叠等级由层叠顺序、他们在HTML中出现的顺序、他们的父级以上元素的层叠等级一同决定,详细的规则见下面层叠顺序的介绍。

    3. z-index

    在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着"z 轴"层叠摆放, 当他们相互覆盖时, z 轴顺序就变得十分重要。

    z-index 只适用于定位的元素,对非定位元素无效,它可以被设置为正整数、负整数、0、auto,如果一个定位元素没有设置 z-index,那么默认为auto;

    元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的,那么它 z-index 设的再高也没用。所以如果你遇到 z-index 值设了很大,但是不起作用的话,就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。

    4. 层叠顺序 (Stacking Order)

    这里其实是涉及了所谓的层叠水平(stacking level),有一张图可以很好的诠释:

    运用上图的逻辑,上面的题目就迎刃而解,inline-blcok 的 stacking level 比之 float 要高,所以无论 DOM 的先后顺序都堆叠在上面。

    不过上面图示的说法有一些不准确,按照 W3官方 的说法,准确的 7 层为:

    1. the background and borders of the element forming the stacking context.
    2. the child stacking contexts with negative stack levels (most negative first).
    3. the in-flow, non-inline-level, non-positioned descendants.
    4. the non-positioned floats.
    5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
    6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
    7. the child stacking contexts with positive stack levels (least positive first).

    稍微翻译一下:

    1. 形成堆叠上下文环境的元素的背景与边框
    2. 拥有负 z-index 的子堆叠上下文元素 (负的越高越堆叠层级越低)
    3. 正常流式布局,非 inline-block,无 position 定位(static除外)的子元素
    4. 无 position 定位(static除外)的 float 浮动元素
    5. 正常流式布局, inline-block元素,无 position 定位(static除外)的子元素(包括 display:table 和 display:inline )
    6. 拥有 z-index:0 的子堆叠上下文元素
    7. 拥有正 z-index: 的子堆叠上下文元素(正的越低越堆叠层级越低)

    所以我们的两个 div 的比较是基于上面所列出来的 4 和 5 。5 的 stacking level 更高,所以叠得更高。

    不过!不过!不过!重点来了,请注意,上面的比较是基于两个 div 都没有形成 堆叠上下文 这个为基础的。下面我们修改一下题目,给两个 div ,增加一个 opacity:

    .container{
        position:relative;
        background:#ddd;
    }
    .container > div{
        width:200px;
        height:200px;
        opacity:0.9; // 注意这里,增加一个 opacity
    }
    .float{
        float:left;
        background-color:deeppink;
    }
    .inline-block{
        display:inline-block;
        background-color:yellowgreen;
        margin-left:-100px;
    }

    Demo戳我

    会看到,inline-block 的 div 不再一定叠在 float 的 div 之上,而是和 HTML 代码中 DOM 的堆放顺序有关,后添加的 div 会 叠在先添加的 div 之上。

    这里的关键点在于,添加的 opacity:0.9 这个让两个 div 都生成了 stacking context(堆叠上下文) 的概念。此时,要对两者进行层叠排列,就需要 z-index ,z-index 越高的层叠层级越高。

    堆叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

     

    层叠顺序 (层叠次序, 堆叠顺序, Stacking Order) 描述的是元素在同一个层叠上下文中的顺序规则,从层叠的底部开始,共有七种层叠顺序,如图:

    转载于:https://www.cnblogs.com/leftJS/p/11063683.html

    展开全文
  • 层叠上下文、层叠层级、层叠顺序 层叠上下文 stacking context 我们假定用户正面向(浏览器)视窗或网页,而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开, 层叠上下文就是对这些 HTML 元素的一个三维构想。众...

    层叠上下文、层叠层级、层叠顺序

    层叠上下文 stacking context

    我们假定用户正面向(浏览器)视窗或网页,而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开,
    层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

    如何创建层叠上下文

    1. 文档根元素(<html>);
    2. position 值为 absolute(绝对定位)或 relative(相对定位)且 z-index 值不为 auto 的元素;
    3. position 值为 fixed(固定定位)或 sticky(粘滞定位)的元素(沾滞定位适配所有移动设备上的浏览器,但老的桌面浏览器不支持);
    4. flex (flexbox (en-US)) 容器的子元素,且 z-index 值不为 auto;
    5. grid (grid) 容器的子元素,且 z-index 值不为 auto;
    6. opacity 属性值小于 1 的元素(参见the specification for opacity);
    7. mix-blend-mode 属性值不为 normal 的元素;
    8. 以下任意属性值不为 none 的元素:
      transform
      filter
      perspective
      clip-path
      mask/mask-image/mask-border
    9. isolation 属性值为 isolate 的元素;
    10. -webkit-overflow-scrolling 属性值为 touch 的元素;
    11. will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素(参考这篇文章);
    12. contain 属性值为 layout、paint 或包含它们其中之一的合成值(比如 contain: strict、contain: content)的元素。
    • 满足以上任意一个条件的元素将形成一个层叠上下文,我们称这样的元素为层叠上下文元素,相交普通元素离屏幕观察者更近(存疑)。
    测试1
    <div class="parent1" style="background-color: #009688;width: 300px;">
        parent1:
        <div class="child">
            child1
        </div>
    </div>
    <div class="parent2" style="background-color: #ffc107;width: 500px;text-align: right;">
        parent2:
        <div class="child">
            child2
        </div>
    </div>
    
    .parent1 {
        position: relative;
        top: 35px;
    }
    

    在这里插入图片描述

    特点

    • 层叠上下文可以包含在其他层叠上下文中,并且一起创建一个层叠上下文的层级。
    • 每个层叠上下文都完全独立于它的兄弟元素:当处理层叠时只考虑子元素。
    • 每个层叠上下文都是自包含的:当一个元素的内容发生层叠后,该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
    测试2

    将上面例子的css改成:

    .parent1 {
        position: relative;
        z-index: 1;
        top: 5px;
    }
    .parent2 {
        position: relative;
        z-index: 10;
    }
    .parent1 .child {
        position: relative;
        z-index: 100;
    }
    .parent2 .child {
        position: relative;
        z-index: 10;
    }
    

    在这里插入图片描述

    注:z-index只在 position 属性值不是 static 或为flex盒子的子元素时有效。

    层叠层级 stacking level

    层叠层级,也有翻译层叠水平、层叠等级,个人觉得层叠上下文 - MDN”层级“更贴近元素在层叠上下文中的level

    所有元素都有层叠层级,层叠层级描述了该元素在当前层叠上下文中在z轴上的顺序。

    层叠水平的比较只有在当前层叠上下文元素中才有意义。

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

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

    层叠顺序 stacking order

    层叠顺序表示元素发生层叠时候有着特定的垂直显示顺序。上面的层叠上下文和层叠水平是概念,而这里的层叠顺序是规则。

    在这里插入图片描述

    • 每一个层叠顺序规则适用于一个完整的层叠上下文元素。

    • 位于最低层级的border/background指的是层叠上下文元素的边框和背景色。

    • 比较规则

    1. 不同层叠上下文的元素,比较他们所在层叠上下文的层级,随所在层叠上下文整体进行排列。

    2. 同一个层叠上下文中,按照层叠顺序,层叠层级越高的元素越z轴上面。

    3. 当层叠层级和层叠顺序都相同,在DOM流中处于后面的元素会覆盖前面的元素。

    • 为什么定位元素会层叠在普通元素的上面

    其根本原因就在于,元素一旦成为定位元素,其z-index就会自动生效,此时其z-index就是默认的auto,也就是0级别,根据上面的层叠顺序表,就会覆盖inline或block或float元素。

    而不支持z-index的层叠上下文元素天然z-index:auto级别,也就意味着,层叠上下文元素和定位元素是一个层叠顺序的,于是当他们发生层叠的时候,在DOM流中处于后面的元素会覆盖前面的元素。

    实例

    1. 第一个实例
    <div class="parent1">
        <div class="child1" style="background-color: #b574c3;">position: relative;z-index: 10;</div>
    </div>
    <div class="parent2">
        <div class="child2" style="background-color: #8b76c1;">position: relative;z-index: 1;</div>
    </div>
    
    .parent1, .parent2 {
        position: absolute;
        z-index: auto;
    }
    .child1 {
        width: 300px;
        height: 100px;
        position: relative;
        z-index: 10;
    }
    .child2 {
        width: 100px;
        height: 300px;
        position: relative ;
        z-index: 1;
    }
    

    在这里插入图片描述

    父元素均为position: absolute;z-index:auto;,按”如何创建层叠上下文中的第二条“,不会创建层叠上下文。
    两个parent均为普通元素,两个子元素均为层叠上下文元素,且都处在根层叠上下文中,z-index高的在前。

    .parent1, .parent2 {
        position: absolute;
        z-index: 0;
    }
    

    在这里插入图片描述

    仅将父元素的z-index改成0,层叠层级发生变化。
    按”如何创建层叠上下文中的第二条“,会创建两个层叠上下文。
    按照比较规则第三天”当层叠层级和层叠顺序都相同,在DOM流中处于后面的元素会覆盖前面的元素“,parent2在parent1前面。

    1. 第二个实例

    还记得测试1的代码吗?”相交普通元素离屏幕观察者更近(存疑)“。

    我们将parent1的样式加上z-index:-1;

    .parent1 {
        position: relative;
        z-index: -1;
        top: 35px;
    }
    

    在这里插入图片描述

    这时发现parent1层叠层级低于parent2了,不是”层叠上下文元素,相交普通元素离屏幕观察者更近“吗?

    从层叠顺序规则上我们可以看到,普通的block元素层叠顺序是高于z-index<0的,所以看到parent2在parent1上面。

    1. 第三个实例
    <div class="box">
        <div class="parent">
            background-color: #5171c4;z-index: 10;
            <div class="child">
                position: absolute;z-index: -1;
            </div>
        </div>
    </div>
    
    .box {
        display: flex;
    }
    .parent {
        width: 350px;
        height: 100px;
        background-color: #5171c4;
        z-index: 10;
    }
    .child {
        width: 100px;
        height: 300px;
        background-color: #51cd8f;
        position: absolute;
        z-index: -1;
    }
    

    在这里插入图片描述

    box作为父元素为flex容器,按”如何创建层叠上下文中的第四条“,parent元素为层叠上下文。

    但是从层叠顺序规则上我们可以看到,层叠上下文元素的border/background(边框和背景色)层叠顺序是低于z-index<0的,所以看到child在parent上面。

    我们把flex去掉,通过opacity: 0.5;、transform: rotate(15deg);等方式将parent变为层叠上下文元素,根据层叠顺序同样会发现child始终在parent上面。

    在这里插入图片描述

    在这里插入图片描述

    参考

    彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

    深入理解CSS中的层叠上下文和层叠顺序

    层叠上下文 - MDN

    展开全文
  • 这些涉及到css中的层叠上下文,层叠水平等 层叠上下文 类似块级格式化上下文,是一个封闭的空间,用来限制内部元素的层叠水平在当前范围活动的。在同一个层叠上下文中,(元素、层叠上下文)的层叠水平按一定的规则...
  • 我们大家可能都熟悉CSS中的z-index属性,需要跟大家讲的是,z-index实际上只是CSS层叠上下文和层叠顺序中的一叶小舟。 一、什么是层叠上下文 层叠上下文,英文称作“stacking context”。是HTML中的一个
  • CSS层叠上下文

    2019-03-30 20:28:22
    原文参考链接 ... 一、什么是层叠上下文 ...层叠上下文,英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在z轴上就“高人一等”。 这里出...
  • 什么是“层叠上下文层叠上下文(stacking context),是html中一个三维的概念。在css2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴,Y轴以及表示层叠的Z轴。一般情况下,元素在页面上沿X轴Y轴平铺...
  • 层叠顺序 层叠顺序(stacking order),表示元素发生层叠时候有着特定的垂直显示顺序。...层叠上下文 层叠上下文是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的...
  • 层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单独作为一个体系,也就是说内容的层叠顺序是以容器的层叠顺序为基准的,而与容器外部元素的层叠顺序无关,层叠上下文的创建可以...
  • 层叠上下文 层叠上下文 html中的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕)视窗或网页用户z轴上的延申,html元素依据自身的属性按优先顺序占用层叠上下文的空间. 三.项目案例 3.1 正常文档流之...
  • CSS之层叠上下文

    2019-10-18 23:16:12
    层叠上下文是一个非常重要的概念,理解层叠上下文,不仅可以帮助我们深入理解 z-index 对元素堆叠顺序的控制,而且对于我们深入理解浮动和定位也是非常重要的。 1. 什么是层叠上下文?     &...
  • 层叠顺序 层叠顺序(stacking order): 表示元素发生层叠时候有着特定的垂直显示顺序。 background border 块级元素 浮动元素 文字/内联元素 ...后来居上:当层叠顺序相同...层叠上下文 层叠上下文是HTML元素的三维概...
  • 一、z-index z-index属性用于设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 其在不设置时默认为auto,设置时只能取整数,如”-2,-1,0,1,2,…”。...层叠上下文(stacking c
  • 层叠上下文层叠上下文(stacking context),是HTML中一个三维的概念,如果一个元素含有层叠上下文,(也就是说它是层叠上下文元素),我们可以理解为这个元素在Z轴上就“高人一等”,最终表现就是它离屏幕观察者更近。...
  • 前话:z-index只是CSS层叠上下文和层叠顺序中的一个马仔 1. 层叠上下文 stacking context 当元素具有了层叠上下文,这个元素在z轴上就“高人一等”,离用户更近 2. 层叠水平 stacking level 所有元素都有 决定同一...
  • 层叠等级和层叠上下文 以往,由于自己使用z-index的频率不大,所以对这个CSS属性存在比较片面的认识。一直认为z-index就是用来描述定义一个元素在屏幕Z轴上的堆叠顺序。z-index值越大在Z轴 上就越靠上,也就是离屏幕...
  • 层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单独作为一个体系,也就是说内容的层叠顺序是以容器的层叠顺序为基准的,而与容器外部元素的层叠顺序无关,层叠上下文的创建可以...
  • 层叠上下文 满足一下条件的任意元素就会形成堆叠上下文. 根元素 (HTML) z-index 值不为 auto的 绝对/相对定位 一个 z-index 值不为 auto的 flex 项目 (flex item),即:父元素 display: flex|inline-flex opacity...
  • CSS-层叠上下文

    2020-02-06 17:29:49
    CSS-层叠上下文 文档中的层叠上下文由满足以下任意一个条件的元素形成: 文档根元素(html); position 值为 absolute(绝对定位)或 relative(相对定位)且 z-index 值不为 auto 的元素; position 值为 ...
  • 我们假定用户正面向(浏览器...层叠上下文在本篇之前的部分——运用 z-index,(我们认识到)某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。文档中的...
  • 上篇文章《CSS半透明效果的属性和场景》最后提到了层叠上下文,在这篇文章中就说说opacity和层叠上下文。建议读者在读本篇文章之前,先仔细阅读张鑫旭大神的《深入理解CSS中的层叠上下文和层叠顺序》,并自己动手...
  • 层叠上下文:z-index

    2019-09-17 14:55:05
    每一个网页都有一个默认的层叠上下文。 这个层叠上下文(桌子)的根源就是<html></html>: html标签中的一切都被置于这个默认的层叠上下文的一个层叠层上 在层叠上下文中,其子元素按照上面解释的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 499
精华内容 199
关键字:

层叠上下文