body下的position到底相对于谁定位?

微信扫一扫,分享到朋友圈

body下的position到底相对于谁定位?

网上的答案一般都是说, position 会相对于其外层第一个设置了 position 不为 static 的元素来定位。但我觉得这样的回答还是比较含糊。 position 的定位其实可以分为两种:一种是父元素设置了定位,另一种是父元素都没设置定位。

接下来我们看一道题来进行细说。请问以下代码显示出来的效果是怎么样的?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<style>
.demo1{
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 100%;
background-color: black;
}
.demo2{
margin-left:-300px;
background-color: red;
height: 100%
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

先来公布答案

为什么设置了 absolute 的元素可以显示,而没有设置的却不能显示?明明它们的 width 都是设置了 100%。

在所有父元素没有设置相对定位或绝对定位的情况下

  1. 元素相对于根元素定位(即html元素)
  2. 其宽高百分比将根据 浏览器可视宽高 进行计算。

所以可以看到,即使我们没有为 htmlbody 进行高度的设置,也是可以正常显示 demo1

父元素设置了相对定位或绝对定位的情况下

  1. 元素会相对于 离自己最近 的设置了 相对或绝对 定位的父元素进行定位
  2. 宽高则根据父元素的盒子宽高(content + padding)(不含border!)进行百分比计算。

所以当我们为 body 设置绝对定位, demo1 会相对于 body 定位,并且宽高也会相对于 body 来设置。但是由于 body 没有设置宽高,所以 demo1 的高为 0,即不显示

微信扫一扫,分享到朋友圈

body下的position到底相对于谁定位?

回归老东家:Tyler“Ninja”Blevins与Twitch签订多年合约

上一篇

如何让致病菌无法黏在你身上,做到真正消除感染?

下一篇

你也可能喜欢

body下的position到底相对于谁定位?

长按储存图像,分享给朋友