我愿赌上一包辣条，这些定位相关你不知道

更换 Edge、火狐、IE 浏览器，以及设置 box-sizing 分别为 border-box 和 content-box，最后的结果都表现一致。

从结果上看，绝对定位的字元素是紧贴着父元素的内边框，绝对定位的原点就是在父元素 padding 的左上角。

从结果上看，绝对定位的元素并不是相对于 body 进行定位的，也不是根据 html 标签，此时的 html 的宽高等同于 body 的宽高，而是根据浏览器视口进行定位的。

所有父元素position 的属性是static 的时候，绝对定位的元素会被包含在初始包含块中，初始包含块有着和浏览器视口一样的大小，所以从表现上来看，就是绝对定位的元素是根据浏览器视口定位。

如果把top和left去掉，那么位置依旧是他原来文档流的位置，只是不占空间了，后面的元素会窜上来。

通过 HTML 结构控制层叠上下文

在使用定位属性时，必不可少的使用 z-index 属性，使用 z-index 属性会创建一个层叠上下文。z-index 值不会在整个文档中进行比较，而只会在该层叠上下文中进行比较。

<div class="bar"></div>
<div class="container">
 <div class="bottom-box-1">
  <div class="top-box"></div>
 </div>
</div>
<div class="container">
 <div class="box-container">
  <div class="bottom-box-2"></div>
  <div class="top-box"></div>
 </div>
</div>

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%;
}

当定位遇到 Transform

transform 下 absolute 宽度被限制

<div class="relative">
        <div class="transform">
            <div class="absolute">i am in transform</div>
        </div>
    </div>
    <div class="relative">
        <div class="no-transform">
            <div class="absolute">i am not in transform</div>
        </div>
    </div>

.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);
}

transform 对 fixed 的限制

身为大聪明的你，加了一行position:fixed安心上线，结果预览机一瞅，没生效？？

<div class="demo">
        <div class="box">
            <div class="fixed">
                <p>没有transform</p>
                <img src="https://gitee.com/zukunft/MDImage/raw/master/img/20210516172759.jpg" alt="">
            </div>
        </div>

        <div class="relative box">
            <div class="fixed">
                <p> 有relative</p>
                <img src="https://gitee.com/zukunft/MDImage/raw/master/img/20210516172759.jpg" alt="">
            </div>
        </div>
        <div class="transform box">
            <div class="fixed">
                <p>有transform</p>
                <img src="https://gitee.com/zukunft/MDImage/raw/master/img/20210516172759.jpg" alt="">
            </div>
        </div>
    </div>

.box {
  height: 250px;
}

.demo {
  height: 9999px;
}


.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.transform {
  transform: scale(1);
}

诶，神奇不，滚起来了，就只有被transform包裹的元素会被滚走。
根据W3C的定义，transform属性值会使元素成为一个包含块，它的后代包括absolute元素，fixed元素受限在其 padding box 区域。所以滚动的时候，transform元素被滚走，其子元素也跟随tranform滚走。

关于包含块

上面提到了包含块，那到底如何形成的包含块，包含块又是个啥子

在 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 positionset to absolute or fixed) are computed from the element's containing block.