关于position:absolute的定位

最新推荐文章于 2024-06-15 22:45:19 发布

INF_MAX

最新推荐文章于 2024-06-15 22:45:19 发布

阅读量830

点赞数

分类专栏： CSS布局文章标签： css

本文链接：https://blog.csdn.net/qq_40388699/article/details/107381395

版权

CSS布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一般网络上谈到关于position:absolute的绝对定位问题，有些地方会说：绝对定位元素相对的元素是它最近的一个已定位祖先，若没有这样的祖先则相对于body进行定位。

这句话并不完全正确

应参考W3school的解释：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

请看如下代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      height: 100%;
      border: 1px solid;
      margin: 80px;
      position: relative;
    }
    .box {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box">

  </div>
</body>
</html>

效果为：

当不给html/body元素设置定位时：

可以发现该结论并不成立，此时该box绝对定位元素是根据初始包含块(视口)来定位的。

特此记录一下，感谢群北梦大佬！北梦NB！

INF_MAX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于position:absolute的定位

一般网络上谈到关于position:absolute的绝对定位问题，有些地方会说：绝对定位元素相对的元素是它最近的一个已定位祖先，若没有这样的祖先则相对于body进行定位。这句话并不完全正确应参考W3school的解释：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。请看如下代码<!DOCTYPE html><html lang="en"><head> <meta charset
复制链接

扫一扫