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

时间:2020-9-12 作者:admin

网上的答案一般都是说,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 class="demo1"></div>
    <div class="demo2"></div>
</body>
</html>

先来公布答案

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

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

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

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

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

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

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

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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。