relative定位属性中top等单位使用%是基于谁？

最新推荐文章于 2023-09-01 14:08:08 发布

weixin_34122810

最新推荐文章于 2023-09-01 14:08:08 发布

阅读量302

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c1619bce51d4522ad6e79e4

这是一篇全过程探究，如果不想看探究过程直接看结论直接看最后面

昨天在对css中各单位属性进行一些查阅了解，发现好像并没有关于relative定位属性单位为%时的文章，今天就来探究一下。

测试环境为Chrome浏览器

首先看一下w3cschool上关于relative属性的定义

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

也就是说：如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

从这个官方例子中的说明确实是非常的浅显易懂。但是我们都知道，absolute定位是与页面相关的，fixed定位是与视口相关的，也就不难看出这两者的top等属性使用%为单位时，是根据页面和视口计算的。

但是relative是“相对于”它的起点。我就直接猜测了top等属性以%为单位的时候，会根据它自身的大小进行计算。
下面的探究用的 html css javascript 代码片段

因为margin设置为0了，所以就直接用偏移量代替left和top值了

<body>
    <div id="relative">relative</div>
</body>
复制代码

*{
  margin: 0;
  padding: 0;
}
  html,body{
    height: 100%;
    background-color: skyblue;
  }
  #relative{
    width: 200px;
    height: 200px;
    background: white;
    position: relative;
    left:10%;
    top:10%;
    z-index: 2;
  }
复制代码

  window.onload=function(){
    var div = document.createElement("div");
    div.style="position:absolute;right:10%;background-color:yellow;"
    var left = document.querySelector("#relative").offsetLeft;
    var top = document.querySelector("#relative").offsetTop;
    div.innerHTML="<br/>relative:  offsetLeft "+left+"     offsetTop: "+top;
    document.body.appendChild(div);
}
复制代码

效果：

使用relative定位的元素长宽都是200px，感觉完全无关
这时候，我调出了google的开发者工具，并且刷新了一下页面，发现了值变了如图：

这时候就猜想应该和body的大小有关于是便把body 的大小输出来了

果然和body大小有关，，这时候联想到是不是和父元素的大小有关，因为body是这个div的父元素。然后我就给它一个有固定宽度（长宽都为300px）的父元素

  <div class="test">
    <div id="relative">relative</div>
  </div>
复制代码

.test{
    width: 300px;
    height: 300px;
    background: blue;
  }
复制代码

然后是这个样子的：

结论

设置为relative定位之后，是更具元素本身起点（左上角）进行移动，top、left等属性单位为%时，其值是基于父容器的长宽值

经过实践后发现一点要注意：
当父容器高度为自适应时top设置为%是不起作用的，但是使用固定单位如px等是可以实现定位需求的