使用transform:scale(1)巧妙模拟position:relative的定位性质

结论

当父级没有明确指明 position 时，其子级的 position: absolute 将相对于第一个具有 position: relative 的父级元素定位。

此时给予该没有指明 position 的元素以 position: relative 定位限制，他和 transform:scale(1) 是效果一致的。

HTML

    <div class="relative">
        <div class="parent">
            <div class="absolute"></div>
        </div>
    </div>

SCSS

.relative {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: relative;
}

.parent {
    /* position: relative; */
    transform: scale(1);
    width: 100px;
    height: 100px;
    margin-left: 100px;
    background-color: orange;

    .absolute {
        position: absolute;
        width: 50px;
        height: 50px;
        left: 0;
        top: 0;
        background-color: violet;
    }
}

其中 transform: scale(1); 可以无损模拟 position: relative; 的性质。

演示

当 .parent 元素没有 relative 性质时（ transform 和 position 都没有），此时 absolute 相对的是第一个具有 relative 的元素 .relative ：

当 .parent 元素使用 relative 性质时（ transform: scale(1); 或 position: relative; ），.absolute 元素将相对于 .parent 定位：