你可能不知道的绝对定位知识

最新推荐文章于 2024-09-15 19:00:01 发布

北望xl

最新推荐文章于 2024-09-15 19:00:01 发布

阅读量84

点赞数

分类专栏： css 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/lan1021206/article/details/132460135

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对于绝对定位，大部分初学者可能学的时候都是这样的，用一句“子绝父相”来进行学习和记忆的。那么，什么是“子绝父相”呢？简单来说，就是子元素设置了绝对定位，脱离了文档流，那么它的定位就是相对于离它最近的第一个position为非静态定位（static属性）的祖先元素来进行定位的，若祖先元素都没有设置，则相对于html元素定位。

那么如果绝对定位真的是靠“子绝父相”来进行定位的话，那么下面这种情况，又该如何解释呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
    <style>
      .out {
        margin-left: 100px;
        width: 600px;
        height: 600px;
        background-color: skyblue;
        position: relative;
      }
      .middle {
        width: 400px;
        height: 400px;
        background-color: pink;
        margin: 0 auto;
        /* transform: scale(1); */
      }
      .inner {
        width: 100px;
        height: 200px;
        background-color: yellow;
        position: absolute;
        left: 50px;
      }
    </style>
  </head>
  <body>
    <div class="out">
      <div class="middle">
        <div class="inner"></div>
      </div>
    </div>
  </body>
</html>

上述代码在浏览器中运行结果如下（最里面的盒子inner设置了绝对定位，最外层的盒子out设置了相对定位，inner盒子相对于out盒子往左偏移了50px）：

这个时候好像一切都还符合“子绝父相”的规律，但是细心的网友注意到了，上面的代码中有一行注释，这个时候，将注释去掉，也就是在中间的盒子加上一个transform: scale(1)，再运行一下代码，这个时候惊奇的发现，运行出来的效果跟之前的不一样了，运行效果如下（最里面的盒子inner设置了绝对定位，最外层的盒子out设置了相对定位，但是inner盒子相对于中间的盒子middle盒子往左偏移了50px）：

这个时候，用“子绝父相”好像就没办法解释的了，那是什么原因造成这种现象呢？

这个时候，就不得不提另一块的知识了“包含块”

什么是包含块呢？

一个元素的位置经常受其包含块的影响。大多数情况下，包含块就是这个元素最近的祖先块级元素的内容区域，但也不是总是这样。如果设置了transform和perspective为非none时，will-change为transform和perspective等(改变包含块的还有几种情况，不一一列举，详细参考官网)这种情况时，也可以改变其包含块。

那么显而易见，绝对定位元素真正相对的是其包含块的位置来进行定位的。

那么第二种情况，相对于中间middle盒子偏移的现象也好解释了， inner元素设置了position: absolute，transform: scale(1)设置的middle盒子成为其最近的包含块，所以是相对于middle盒子进行的偏移。