--- theme: qklhk-chocolate --- 写码写累了不如来看看这些奇奇怪怪的css，腰不酸腿不疼，一阵轻松加愉快（还能偷我表情包） ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47f1ebef18cd41109bcdef7c213ebd44~tplv-k3u1fbpfcp-watermark.image) ## 子元素的绝对定位原点在哪？用了那么久的定位，有注意过子元素的绝对定位原点，是在盒子模型的哪一处，在 padding、border 还是 content？ ![位图](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be4d9614537942f796773355e44c6dfd~tplv-k3u1fbpfcp-zoom-1.image) 实践出真知。既然不确定那就实操个例子看看。 ```html

father

child

``` ```css body { background-color: rgb(20, 19, 19); } .father { width: 300px; height: 300px; margin: 40px; border: 20px solid rgb(202, 30, 30); padding: 40px; position: relative; background-color: #eee; } .child { width: 50px; height: 50px; position: absolute; top: 0; left: 0; background-color: rgb(228, 207, 17); } ``` 在 Chrome 90 的版本下的表现。

更换 Edge、火狐、IE 浏览器，以及设置 `box-sizing` 分别为 `border-box` 和 `content-box`，最后的结果都表现一致。从结果上看，绝对定位的字元素是紧贴着父元素的内边框，绝对定位的原点就是在父元素 padding 的左上角。 [戳链接体验一下](http://49.234.70.125:5001/dots.html) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/108f402ed20f414b9c81986eb8329aca~tplv-k3u1fbpfcp-watermark.image) ## 如果绝对定位的父亲们都没有设置 relative，那么是将会是定位在哪？ body 下只有一个绝对定位的元素，设置了 `bottom:0`，那么他的表现将会是如何呢？定位在 `body` 的底边？ ```html I am body

I am absoluted

``` ```css html { background-color: #fff; } body { height: 50vh; background-color: #ddd; } .absolute { width: 120px; height: 50px; position: absolute; bottom: 0; left: 0; background-color: rgb(0, 0, 0); color: #fff; } ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d34f8363990e45c28bf189018937819c~tplv-k3u1fbpfcp-watermark.image) 从结果上看，绝对定位的元素并不是相对于 body 进行定位的，也不是根据 html 标签，此时的 html 的宽高等同于 body 的宽高，而是根据浏览器视口进行定位的。所有父元素`position` 的属性是`static` 的时候，绝对定位的元素会被包含在初始包含块中，初始包含块有着和浏览器视口一样的大小，所以从表现上来看，就是绝对定位的元素是根据浏览器视口定位。如果把top和left去掉，那么位置依旧是他原来文档流的位置，只是不占空间了，后面的元素会窜上来。 [戳我体验](http://49.234.70.125:5001/position.html) ## 通过 HTML 结构控制层叠上下文在使用定位属性时，必不可少的使用 `z-index` 属性，使用 `z-index` 属性会创建一个层叠上下文。`z-index` 值不会在整个文档中进行比较，而只会在该层叠上下文中进行比较。那么看看下面的效果是如何实现的？ ```html

``` ```css body { display: flex; justify-content: center; align-items: center; height: 90vh; } .bar { position: absolute; top: 65vh; z-index: 2; width: 100vw; height: 20px; background: #8bbe6e; } .top-box { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: 50%; background: #626078; filter: brightness(60%); } .bottom-box-1 { position: absolute; top: 45%; z-index: 1; transition: top 1s; width: 40px; height: 40px; background: #626078; } .container:hover .bottom-box-1 { top: 72%; } .box-container { position: absolute; top: 45%; transition: top 1s; } .bottom-box-2 { position: relative; z-index: 1; width: 40px; height: 40px; background: #626078; } .container { border: 2px dashed #626078; height: 80%; width: 100px; margin: 20px; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; } .container:hover .box-container { top: 72%; } ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50665036352c41dc8e2a620f6122ccfa~tplv-k3u1fbpfcp-watermark.image) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f8d82220e334c0c89475713fbf3f275~tplv-k3u1fbpfcp-watermark.image) 鼠标分别移入两个虚线框内，我们发现，第二个例子 bar 穿过了两个正方形。这两者的区别就在于 HTML 结构，在第一个例子中，小正方形在大正方形的里面，大正方形在移动的时候，小正方形也随之移动，但是因为大正方形对决定位且有 z-index 属性不为 `auto`，因此创建了一个层叠上下文，这导致大正方形内的所有元素都是在这个层叠上下文里层叠。那么第二个例子是怎么解决的呢？第二个例子的技巧在于引入了一个新的 div 来包裹这两个正方形，这个新的 div 只负责移动。而里面的大小正方形和 bar 处于同一个层叠上下文中。这样子就可以产生 bar 从两个正方形中穿过的效果。还没懂的来看图来看图： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f11ce7a3bf740cf824dab8b6a0ebf13~tplv-k3u1fbpfcp-watermark.image) [戳我体验哦](http://49.234.70.125:5001/bar.html) 总结一下创建层叠上下文的几种情况（别怪我枯燥，就是这么多）： - 文档根元素``; - `position` 值为 `relative`（相对定位）或 `absolute`（绝对定位）且 `z-index` 值不为 `auto` 的元素; - `position` 值为 `fixed`（固定定位）或 `sticky`（粘滞定位）的元素; - `flex` (flexbox) 容器的子元素，且 `z-index` 值不为 `auto`; - `grid` 容器的子元素，且 `z-index` 值不为 `auto`; - `opacity` 属性值小于 1 的元素; - `mix-blend-mode` 属性值不为 `normal` 的元素; - 以下任意属性值不为 `none` 的元素： - `transform` - `filter` - `perspective` - `clip-path` - `mask` / `mask-image` / `mask-border` - `isolation` 属性值为 `isolate` 的元素； - `-webkit-overflow-scrolling` 属性值为 `touch` 的元素； - `will-change` 值设定了任一属性而该属性在 `non-initial` 值时会创建层叠上下文的元素 - `contain` 属性值为 `layout`、`paint` 或包含它们其中之一的合成值（比如 c`ontain: strict`、`contain: content`）的元素; 好了，你学废了嘛~ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f0ea08f8e54403e994c67438c99472e~tplv-k3u1fbpfcp-watermark.image) ## 当定位遇到 Transform ### transform 下 absolute 宽度被限制以前，我们设置 `absolute` 元素宽度 100%, 则都会参照第一个非`static`值的`position`祖先元素计算，没有就`window`. 现在，=-=，需要把`transform`也考虑在内了。默认情况下我们设置 `absolute` 的宽度 100%，会根据第一个不是`static`的祖先元素计算，没有就找视口宽度。现在也考虑 CSS3 的 transform 属性了。 ```HTML

i am in transform

i am not in transform

``` ```css .relative { position: relative; width: 400px; height: 100px; background-color: rgb(233, 233, 233); } .transform { transform: rotate(0); width: 200px; } .no-transform { width: 200px; } .absolute { position: absolute; width: 100%; height: 100px; background-color: rgb(137, 174, 255); } ``` ![image-20210516170658662](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/edfa6f1c2a984d659ac1c772091ea088~tplv-k3u1fbpfcp-zoom-1.image) 可以看到绝对定位的宽度是相对 transform 的大小计算了。 [快戳我体验](http://49.234.70.125:5001/transform.html) ### transform 对 fixed 的限制身为大聪明的你，加了一行`position:fixed`安心上线，结果预览机一瞅，没生效？？ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58a1c69e45f847068b0248dd37efd21c~tplv-k3u1fbpfcp-watermark.image) `position:fixed` 正常情况下可以让元素不跟随滚动条滚动，这种行为也无法通过 `relative/absolute` 来限制。但是遇到 `transform`，他就被打败了，降级成 `absolute`。 ```HTML

没有transform

有relative

有transform

``` ```CSS .box { height: 250px; } .demo { height: 9999px; } .fixed { position: fixed; } .relative { position: relative; } .transform { transform: scale(1); } ``` ![WX20210516-174619@2x](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b07a83fde52e4e5d9e2140adbbb73ce8~tplv-k3u1fbpfcp-zoom-1.image) 诶，神奇不，滚起来了，就只有被`transform`包裹的元素会被滚走。根据W3C的定义，`transform`属性值会使元素成为一个包含块，它的后代包括absolute元素，fixed元素受限在其 `padding box` 区域。所以滚动的时候，transform元素被滚走，其子元素也跟随tranform滚走。 [快戳我体验](http://49.234.70.125:5001/fixed.html) #### 关于包含块上面提到了包含块，那到底如何形成的包含块，包含块又是个啥子在 MDN 中的解释 > The size and position of an element are often impacted by its containing block. Percentage values that are applied to the `width`, `height`, `padding`, `margin`, and offset properties of an absolutely positioned element (i.e., which has its `position`set to `absolute` or `fixed`) are computed from the element's containing block. 即一个元素的尺寸和位置受到它的**包含块(containing block)**的影响。对于一些属性，例如 `width`, `height`, `padding`, `margin`，绝对定位元素的偏移值（比如 `position` 被设置为 `absolute` 或 `fixed`），当我们设置百分比值的时候，它的这些值计算，就是通过该元素的包含块的值来计算的。通常情况下，包含块就是这个元素最近的祖先块元素的内容区域，但实际可能不是；我们可以通过 `position` 的属性来确定它的包含块； 1. 如果 `position` 属性为 `static` 、 `relative` 或 `sticky`，包含块可能由它的最近的祖先**块元素**（比如说 `inline-block`, `block` 或 `list-item` 元素）的内容区的边缘组成，也可能会建立格式化上下文(比如说 `table container`,`flex container`, `grid container`, 或者是 `block container` 自身) 2. 如果 `position` 属性为 `**absolute**` ，包含块就是由它的最近的 `position` 的值不是 `static` （也就是值为`fixed`, `absolute`, `relative` 或 `sticky`）的祖先元素的内边距区的边缘组成。 3. 如果 `position` 属性是 **`fixed`**，在连续媒体的情况下(continuous media)包含块是 `viewport` ,在分页媒体(paged media)下的情况下包含块是分页区域(page area)。 4. 如果 `position` 属性是 `absolute` 或 `fixed`，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的： 1. `transform` 或 `perspective`的值不是 `none` 2. `will-change` 的值是 `transform` 或 `perspective` 3. `filter`的值不是 `none` 或 `will-change` 的值是 `filter`(只在 Firefox 下生效). 4. `contain` 的值是 `paint` (例如: `contain: paint;`) 需要注意的是根元素(``)所在的包含块是一个被称为**初始包含块**的矩形。他的尺寸是视口 viewport (for continuous media) 或分页媒体 page media (for paged media). 如果所有的父元素都没有显式地定义`position`属性，那么所有的父元素默认情况下 `position` 属性都是`static`。结果，绝对定位元素会被包含在**初始包含块**中；这个初始块容器有着和浏览器视口一样的尺寸，并且``元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在``元素的外面，并且根据浏览器视口来定位。 ## 总结遇到奇奇怪怪的css问题不要慌~硬调不是好办法不如来我这瞅瞅~~ 万一就解决了呢✿✿ヽ(°▽°)ノ✿ 走过路过不要错过，求个关注求个赞~ ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b50d33d3b2234ed2ba87fa67e0a543e2~tplv-k3u1fbpfcp-watermark.image)