static

--- theme: vue-pro --- 这是我参与8月更文挑战的第7天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831") # 🧃序言最近在整理一些蛮偏的面经题，想起来很久以前被问到的一道题，就是 `position` 和 `z-index` 。短短 `10min` 问了这两个属性，大概直接把周一问懵了。那个时候的心情可能是这样的…… ![丢脸](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d8c5dd9eb3a4b2186a079f2a31aaf67~tplv-k3u1fbpfcp-zoom-1.image) 于是，一鼓作气，不懂的知识咱还是得补呀，万一下回又直接被问懵了，那就是死不知悔改了不是。最后，通过各种资料的查询和理解，整理了下文。内容主要涵盖 `position` 各个取值的解析以及关于 `z-index` 的使用。下面开始进入本文的讲解~🧐 # 🍷一、文章结构抢先知在文章开始讲解之前，我们先用一张思维导图来了解本文所要讲解的知识。**详情见下图👇** ![思维导图](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b22fa6442364ea5a61c48d4d97ba93c~tplv-k3u1fbpfcp-zoom-1.image) 了解完思维导图之后，现在开始进入本文的讲解。 # 🍸二、position ## 1. position的取值通常情况下， `position` 有以下几个取值。**具体如下：** | 取值 | 含义 | 说明 | | :----------: | :------: | :----------------------------------------------------------: | | **static** | 静态定位 | 对象**遵循**标准文档流，**top**，**right**，**bottom**，**left** 等属性失效。 | | **relative** | 相对定位 | 对象**遵循**标准文档流中，依赖**top**，**right**，**bottom**，**left** 等属性相对于该对象在标准文档流中的位置进行偏移，同时可通过 **z-index** 定义层叠关系。 | | **absolute** | 绝对定位 | 对象**脱离**标准文档流，使用 **top**，**right**，**bottom**，**left** 等属性进行绝对定位（相对于 **static** 定位以外的第一个父元素进行绝对定位），以及可通过 **z-index** 定义层叠关系。 | | **fixed** | 固定定位 | 对象**脱离**标准文档流，使用 **top**，**right**，**bottom**，**left** 等属性进行绝对定位（相对于浏览器窗口进行绝对定位）同时可通过 **z-index** 定义层叠关系。 | | **sticky** | 粘性定位 | 可以说是相对定位 **relative** 和固定定位 **fixed** 的结合。元素固定的相对偏移是相对于**离它最近的具有滚动框的祖先元素**，如果祖先元素都不可以滚动，那么是相对于 **viewport** 来计算元素的偏移量。 | ## 2. 标准文档流我们先来看下**标准文档流的定义：** 所谓标准文档流，指的是在不使用其他**与排列和定位相关的**特殊 `CSS` 规则时，元素的默认排列规则。理解完定义之后，我们来看看各个取值的使用效果。 ## 3. 各取值解析 ### （1）static `static` ，是默认的 `position` 值。它没有特殊的定位，且遵循标准文档流。我们用例子来展示一下。 **先附上代码：** ```html static

``` 现在来看**演示效果：** ![static](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da3328171ede44d0a14defbd34b4b3f2~tplv-k3u1fbpfcp-zoom-1.image) 大家可以看到，正如我们所想的，规规矩矩的出现在我们面前，跟我们平常实现其他内容所遵循的规则也基本一样。所以这里不做过多解释。 ### （2）relative `relative` ，对象遵循标准文档流，依赖 `top`，`right`，`bottom`，`left` 等属性相对于该对象在标准文档流中的位置进行偏移，同时可通过 `z-index` 定义层叠关系。我们现在用一个例子来展示一下。 **先附上代码：** ```html relative

``` 现在来看**演示效果：** ![relative](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4929c1e6a4ea4445b0a5ce19d68efa68~tplv-k3u1fbpfcp-zoom-1.image) 大家可以看到， `relative` 是相对于该对象**所处的标准文档流**中的位置，依据 `left` 和 `top` 进行定位（当然也可以使用 `right` 和 `bottom` ，本例仅用以上两个属性做说明）。同时， `left` 和 `top` 并不会改变该对象原本在文档流中的占位空间。 *** 值得注意的是，如果设置为 `margin` 和 `padding` 属性时，该对象在标准文档流中的占位空间也将会随之改变。 **附上代码：** ```html relative

``` 现在我们来看下浏览器的**演示效果：** ![relative](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fbf6817f0234ac9a3775169f0b55be5~tplv-k3u1fbpfcp-zoom-1.image) 大家可以看到，当设置了 `margin` 属性时，该对象仍然跟随着其**所处的标准文档流**中的占位空间的变化而变化。 ### （3）absolute `absolute` ，对象脱离标准文档流，使用 `top` ， `right` ， `bottom` ， `left` 等属性进行绝对定位（相对于 `static` 定位以外的第一个父元素进行绝对定位），以及可通过 `z-index` 定义层叠关系。先来看个例子，**具体代码如下：** ```html Document

``` **具体效果如下：** ![absolute](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf0064d068a449b0ac6dca29ea1ff40a~tplv-k3u1fbpfcp-zoom-1.image) 从上面的定义中我们了解到，绝对定位 `absolute` 是脱离标准文档流的，且是相对于 `static` 定位以外第一个父元素，并且使用 `left和top` 或 `right和bottom` 进行绝对定位。所以大家可以看到上图，设置了 `absolute` 的 `four` 相对于 `father-ele` 进行定位。值得一提的是，在使用 `absolute` 绝对定位时，必须指定 `left` 、 `top` 、 `right` 和 `bottom` 中的至少一个，否则 `left/right/top/bottom` 属性将会使用默认值 `auto` 。这将导致对象遵从标准文档流，在前一个对象之后立即被呈递，简单讲就是都变成 `relative` ，并且会占用文档空间。还有就是，对于设置了 `position` 属性的元素来说，如果还设置了 `width` ，且同时设置了 `left/right` 属性，那么 `left` 生效。同理如果还设置了 `height` ，且 `top/bottom` 同时存在时， `top` 生效。 ### （4）fixed `fixed` ，对象脱离标准文档流，使用 `top` ， `right` ， `bottom` ， `left` 等属性进行绝对定位（相对于**浏览器窗口**进行绝对定位）同时可通过 `z-index` 定义层叠关系。先来看个例子，**具体代码如下：** ```html fixed

``` **具体效果如下：** ![fixed](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47886f8ed4f74e51ab719192a612c72c~tplv-k3u1fbpfcp-zoom-1.image) 大家可以看到，`fixed` 是相对于**浏览器窗口**进行固定定位的。 ### （5）sticky 对于 `sticky` 来说，就是粘性定位，主要用来做导航栏滑动到一定程度时让导航栏固定到顶部。不过这个属性有它一定的利弊存在，要了解清楚其中存在的各种问题后，谨慎使用！！这里不再过多介绍，感兴趣的小伙伴可以[戳此链接](https://juejin.cn/post/6844904087486464007)查看该属性的内容~ 讲到这里，关于 `position` 的各种取值解析基本就结束啦！但是细心的小伙伴可能已经发现，上面一直提到的 `z-index` ，好像都没有讲到。不着急，接下来我们就来讲讲 `z-index` 这个属性的纸短情长。 # 🍹三、z-index ## 1. 一个片面的理解在我的认知里，一直认为 `z-index` 是用来描述页面的层叠顺序。一旦 `z-index` 的值越大，页面就可以叠放的越高。但事实证明，是我孤陋寡闻了。所谓 `z-index` ，只有在以下场景适用。**分别为：** - 首先， `z-index` 这个属性并不是在所有的元素上都有效果。它仅仅只在定位元素（定义了 `position` 属性，且属性的值为非 `static` 值的元素）上有效果。 - 要判断元素在 `z轴` 上的**堆叠顺序**，并不仅仅是直接比较两个元素的 `z-index` 值的大小，同时，这个堆叠顺序还由元素的**层叠上下文**和**层叠等级**共同决定。 **先来看一张图👇** ![z-index](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87000103020e44b494ed3f03244f296e~tplv-k3u1fbpfcp-zoom-1.image) 相信大家对三维坐标空间一定很熟悉。通常地，我们用 `x轴` 来表示**水平位置**，用 `y轴` 来表示**垂直位置**，然后用 `z轴` 来表示在**纸面内外方向上的位置**。但是呢，由于屏幕是一个二维平面，所以我们并不是真正地看到 `z轴` 。我们经常说的看到 `z轴` ，实际上是通过**透视**，将元素展现在其二维空间的前面或者后面才看到的。对 `z-index` 有了一个基础的认识之后，我们来看看它的取值。 ## 2. z-index的取值要确定沿着这 `z轴` 元素是如何分布的，`css` 允许我们对 `z-index` 属性设置3种类型的值。**分别是：** - auto（自动，默认值）； - 整数（正整数/负整数/0）； - inherit（继承）。目前，让我们先关注在**整数值**上。整数值可以是正值，负值，或0。通常来说，**数值越大**，元素也就越靠近观察者；而**数值越小**，元素看起来也就越远。所以，如果有两个元素放在了一起，占据了二维平面上一块共同的区域，那么有着较大 `z-index` 值的元素就会掩盖或者阻隔有着较低 `z-index` 值的元素在共同区域的那一部分。尽管如此，现在还是有一些问题悬而未决、等待我们的解答。**具体问题如下：** - 当一个设置了 `z-index` 值的定位元素与常规文档流中的元素相互重叠的时候，谁会被置于上方？ - 当定位元素与浮动元素相互重叠的时候，谁会被置于上方？ - 当定位元素被嵌套在其他定位元素中时，又会发生什么呢？带着这些问题，我们继续深入了解神奇的 `z-index` 是怎么工作的，又会抛出哪些新的内容呢？接下来我们来了解一下上述中提到的**层叠上下文**、**层叠等级**和**层叠顺序**。 ## 3. 层叠上下文 ### （1）举个例子我们来做一个**具象的比喻：** 假设现在有一张桌子，桌子上面呢，放了好多水果，那么这张桌子就代表着一个层叠上下文。再来，我们还有一张桌子，桌子上面，放了很多本书，那么新的这张桌子，又代表着一个新的层叠上下文。而水果和书这两样东西，就可以理解为他们**所处的层叠上下文**中的**层叠上下文元素**。这样理解，会不会就明白了许多呢。现在，我们来抛出它的定义。 ### （2）定义层叠上下文(stacking context)，是HTML中一个三维的概念。在 `CSS2.1` 规范中，每个盒模型的位置是三维的，分别是平面画布上的`X轴`，`Y轴`以及表示层叠的`Z轴`。一般情况下，元素在页面上沿 `X轴` 和 `Y轴` 平铺，我们是察觉不到它们在`Z轴`上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。如果一个元素含有**层叠上下文**，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在`Z轴`上就“高人一等”，最终表现就是它离屏幕观察者更近。 ## 4. 层叠等级 ### （1）定义讲完层叠上下文，我们再来看看层叠等级又是什么呢？所谓层叠等级(stacking level)，也叫 `层叠级别` 或 `层叠水平` 。**它有两层含义：** - 在同一个层叠上下文中，它描述的是该层叠上下文中的层叠上下文元素在 `Z轴` 上的上下顺序。 - 在其他普通元素中，它描述的是这些普通元素在 `Z轴` 上的上下顺序。 ### （2）举个例子同样，我们用刚刚那个例子来继续举例。假设桌子上面的苹果和书，是一层一层叠上去的。现在，我们先看第一张桌子，第一张桌子的所有苹果，是在同一个层叠上下文中，那么苹果的堆叠顺序，就是在这个层叠上下文中 `z轴` 上的上下顺序，这是**第一层含义**。然后呢，第一张桌子和第二张桌子，他们是两个不同的层叠上下文，我们把它们视为两个普通的元素。那这两个普通的元素，它们也有在 `z轴` 上的上下顺序。所以呢，这个上下的堆叠顺序，就是我们所说的**第二层含义**。 ## 5. 形成的条件看完层叠上下文和层叠等级，我们现在需要来了解一下，要怎么样，才能让元素形成层叠上下文。**具体有以下几种情况：** - 根元素`html` ； - 绝对定位 `absolute` 或相对定位 `relative` 且 `z-index` 值不为 `auto` ； - 一个 `flex` 项目，且 `z-index` 值不为 `auto` ，也就是父元素 `display: flex|inline-flex` ； - 元素的 `opacity` 属性值小于 `1` ； - 元素的 `transform` 属性值不为 `none` ； - 元素的 `mix-blend-mode` 属性值不为 `normal` ； - 元素的 `isolation` 属性被设置为 `isolate` ； - 在 `mobile WebKit` 和 `Chrome 22+` 内核的浏览器中，`position: fixed` 时总是会创建一个新的层叠上下文, 即使 `z-index` 的值是 `auto` ； - 元素的 `-webkit-overflow-scrolling` 属性被设置 `touch` 。 ## 6. 层叠顺序在第 `4` 点中，尽管上面所说的只包含一个两级的层叠，但事实上在一个层叠上下文中，一共可以有**7种层叠等级**。**具体如下图：** ![7种层叠层级](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/731ab2d1cdaf4215963b81b083fa3c03~tplv-k3u1fbpfcp-zoom-1.image) 下面我们来一一对上面的7种层叠顺序进行阐述。**说明如下：** - **背景和边框** —— 形成层叠上下文的元素的背景和边框，也是层叠上下文中的**最低等级**。 - **负z-index值** —— 层叠上下文内有着 `负z-index值` 的子元素。 - **块级盒** —— 文档流中非行内非定位子元素。 - **浮动盒** —— 非定位浮动元素。 - **行内盒** —— 文档流中行内级别非定位子元素。 - **z-index: 0** —— 定位元素，这些元素将形成了新的层叠上下文。 - **正z-index值** —— 定位元素。层叠上下文中的最高等级。 **注：** 字体颜色对应框内颜色以上这七个层叠等级构成了层叠次序的规则。比如，在**层叠等级七**上的元素会比在**等级一至六**上的元素显示得更上方（更靠近观察者）。在层叠等级四上的元素会显示在**等级一至三**上的元素之上。看到上面这张图的时候，我想到了一些坑。如果你只看层叠等级 `2` , `6` , `7` （也就是那些提到了 `z-index` 的等级），那么有很大的可能你会发现这跟你理解的 `z-index` 可能是一样的。正 `z-index` 值比 `z-index:0` 值更高一层， `z-index:0` 值又比负 `z-index` 值高一层。往往我们很多时候都只理解到了这里，也就觉得 `z-index` 只有这些内容，往后的事也不了了之了。但事实上，事实与现实总是不相符的。一般来说，大多数的元素都比 `z-index:0` 和 `z-index > 0` 时的层叠等级要低。另外同样有趣的是非定位元素分散在四个不同的层叠等级上，为什么是这样子的呢？其实，你可以想象以下，如果所有的非定位元素都在**同一层叠等级**上，那么我们也就不会看到文字（行内盒）在 `div` 盒子上了（块级盒）。 ## 7. 例子展示讲到这里，相信大家对 `z-index` 已经有了一定的认知。接下来呢，我们就就来用一个例子巩固一下上面所学到的知识🌈 **先附上代码：** ```html Document

``` 大家可以先想象一下具体的层叠顺序，然后再来看结果。**接下来看一下演示效果：** ![演示图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0da6b2a47b424a2bba9442ec7b6dd6c4~tplv-k3u1fbpfcp-zoom-1.image) 不知道最终的结果是都跟小伙伴们心里的预期是一样的呢。很多小伙伴可能想着， `ele4` 的 `z-index` 值不是 `50` 吗，而 `ele2` 和 `ele3` 的 `z-index` 值是 `100` 和 `200` ，为什么反而是 `ele4` 在最上面呢。我们来解决这个疑惑。其实， `ele1` 和 `ele4` 是两个不同的层叠上下文，而 `ele2` 和 `ele3` 是 `ele1` 的层叠上下文元素。所以， `ele1` 的值是 `10` ，而 `ele2` 和 `ele3` 可以理解为是 `10.100` 和 `10.150` ，这样，自然地，`ele4` 肯定就是在最上方了。还有另外一种特殊情况就是， `ele4` 的 `z-index` 的值跟 `ele1` 的值是一样的，都是 `10` 。在这种情况下，如果遇到在同一个层叠上下文的元素，他们的 `z-index` 值如果一样的话，那得遵循个**先来后到**原则。 `ele1` 先出现了，所以它在里面；而 `ele4` 后出现，它在外面。那如果遇到 `ele4` 的 `z-index` 的值是 `9` 呢？我们改一下 `ele4` 的 `css` 样式，然后来观察一下效果。**具体代码如下：** ```css .ele4 { background: #80ed99; top: 200px; z-index: 9; } ``` **具体效果如下：** ![演示效果](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98d6dcd88efb42f6a6227a41b8503ae5~tplv-k3u1fbpfcp-zoom-1.image) 通过上图，大家可以发现，`ele4` 的 `z-index` 值比 `ele1` 小，所以自然地， `ele4` 在里面， `ele1` 在外面。 # 🥂四、结束语当你初次遇到 `z-index` 时，它就像一个非常简单、易于理解的属性。它的值代表着在朝向屏幕内外面轴上的位置。而深入探究 `z-index` 以后我们还发现了很多 `z-index` 背后的事情，包括层叠上下文、层叠等级和层叠次序规则等等。所以说呀，万宗不变其一，万事万物还是得追溯到源头上才能更好的解决问题本身。相信通过上文的了解，大家对 `position` 和 `z-index` 又有了一个全新的认识~ # 🐣彩蛋 One More Thing ## （：参考资料 👉[彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index](https://juejin.cn/post/6844903667175260174) 👉[关于z-index 那些你不知道的事](https://webdesign.tutsplus.com/zh-hans/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892) 👉[CSS-position:static/relative/absolute/fixed定位](https://blog.csdn.net/fe_flyfish/article/details/74279163) 👉[张鑫旭老师的CSS世界]() ## （：番外篇 > - 关注公众号**星期一研究室**，第一时间关注优质文章，**更多精选专栏待你解锁**~ > - 如果这篇文章对你有用，记得**留个脚印jio**再走哦~ > > - 以上就是本文的全部内容！我们下期见！👋👋👋