css之层叠上下文

最新推荐文章于 2024-04-22 16:45:52 发布

光芒万丈母娘

最新推荐文章于 2024-04-22 16:45:52 发布

阅读量570

点赞数

分类专栏： html/css 文章标签： css

本文链接：https://blog.csdn.net/weixin_40322503/article/details/79882777

版权

html/css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

感谢chokcoco、小火柴的蓝色理想和张鑫旭三位大佬，推荐看：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

主要记录通过这个题目而恶补的css属性们。

题目：你真的懂z-index:auto和z-index:0吗？

其中2是因为“后来居上”所以才会在1的上面，当改变z-index:0/auto时是没有区别的。

但z-index:0会创建层叠上下文，这又会影响什么呢？

    <div id="div1">
         <div id="div1_inside">222222222222222222222</div>
    </div>
    <div id="div2">
        <div id="div2_inside">111111111111111111111</div>
    </div>

    div {
            position: relative;
            top: 50px;
            left: 50px;
        }
    #div1 {
            z-index: 0;
        }
    #div1_inside {
            z-index: 2;
            width: 90px;
            height: 90px;
            background: darkgreen;
            white-space:normal;
            word-break:break-all;
            word-wrap:break-word; 
            position: absolute;
        }
    #div2 {
            z-index: 0;
        }
    #div2_inside {
            position: relative;
            z-index: 1;
            width: 80px;
            height: 80px;
            background: darkseagreen;
            white-space:normal;
            word-break:break-all;
            word-wrap:break-word; 
        }

效果是：

啊咧咧~明明z-index:2的东西为什么会跑到下面去呢？

其实层叠上下文元素有这样一条特性：每个层叠上下文自成体系，当元素当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。因为div1_inside和div2_inside的父元素都是z-index:0，所以他们会随爹走，div2比div1靠后（遵循“后来者居上”原则），自然div2_inside会在div1_inside上面。

另附四种不同情况的对比图：

插句题外话：使块级元素内文字换行的方式

①white-space:normal（pre-wrap、pre-line同）

如果位于换行处的单词很长，则直接另起一段，不会让单词折断。

white-space:nowrap 不换行（pre同）

②word-break:normal(默认)

word-break:break-all 如果位于换行处的单词很长会直接粗暴地将单词折断。

word-break:keep-all 只能在半角空格或连字符处换行，像这样：

③word-wrap:normal(默认)

word-wrap:break-word

重头戏来了~ word-wrap:break-word和word-break:break-all的区别是什么呢？

嘛~记住他们也很容易：我爸爸（wbba）玩玩呗？玩！（wwbw）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~一条不知名的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

记得上一篇博客我曾说过：z-index只能配合着positioned元素一起使用。

在css2.1的时代它是没错的，但是随着css3的时代来临，这句话是错误的！

display:flex|inline-flex与层叠上下文

在此之前先来回顾下flex和inline-flex区别：

.parent {
            height: 100px;
            width: 200px;
            display: flex;
            background: deeppink;
        }
/*下面这种写法与上面是等效的*/
.parent {
            height: 100px;
            display: inline-flex;
            background: deeppink;
        }
.parent > div {
            height: 100px;
            width: 40px;
            margin: 5px;
            border: 3px solid black;
            background: deepskyblue;
        }

inline-flex比flex要智能一点，能自己计算总共的width(当然你要是自己设定width，它会根据你设定的width走)。我总共建了5个div在.parent内部。

另附一张图表明flex内部的元素的width是包括margin、border、padding和content的（区别flex-basis）。

接下来复习下flex中常用的属性

align-content表明项目竖直方向(交叉轴)如何排布，justify-content表明项目水平方向(主轴)如何排布，所以他俩写在弹性盒元素里；而align-self可以改变单个项目，所以它写在你要改变排布的单个项目中，同时它可以覆盖align-content。他们都有六种可选值：flex-start:取消项目之间的空白，把项目放在容器顶部；center:取消项目之间的空白，把项目放在容器中心；flex-end:取消项目之间的空白，把项目放在容器结尾；space-between:两端对齐。留相同间隔在每个项目之间；space-around:项目之间的空白为两倍的单个项目空白。默认是stretch会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列。

想要换行时采用flex-wrap:wrap，不想换行用nowrap（默认）。

想要改变方向就用flex-direction，下面这个例子会告诉你这个属性的坑：

如何将改成

使用的html结构如下：

   <div class="box">
        <div class="column">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>            
        </div>
        <div class="column">
            <span class="item"></span>  
            <span class="item"></span>
            <span class="item"></span>              
        </div>
    </div>

机智的小伙伴一定会用上面提到的flex-direction，但是这个属性是放到box里还是column里呢？是给爷爷还是给爹这是个问题。

答案是都给！

给box的flex-direction会使

所以只给爷爷就会横着出去排成一排。

给column的flex-direction会使

所以只给爹就会竖着出去排成一列。

此外flex-basis这个属性定义了在分配多余空间之前，项目占据的主轴空间，默认是auto(项目的本来大小)。

以上就是看阮一峰flex实例总结的坑，点击打开链接

下面该说说正题了！

①元素a的父元素A设置display:flex|inline-flex；②元素a设置z-index:一个数（不是auto不是默认）；同时满足以上两点时，元素a即为层叠上下文。

    <div class="parent">
        <div class="child">
            <div></div>
        </div>
    </div>

.parent {
            display: flex;
        }
.child {
            z-index: 0;
            height: 300px;
            width: 300px;
            display: inline-flex;
            background: deeppink;
        }
.child > div {
            height: 200px;
            width: 40px;
            border: 3px solid black;
            background: deepskyblue;
            z-index: -1;
        }

当child元素设置z-index:0时，根据所以会显示出child下的div。