CSS 中position:absolute的定位到底是相当于body，还是父级元素的问题

最新推荐文章于 2022-07-31 14:09:48 发布

weixin_34023863

最新推荐文章于 2022-07-31 14:09:48 发布

阅读量449

点赞数

文章标签： python

原文链接：https://my.oschina.net/fadoudou/blog/1142735

版权

2019独角兽企业重金招聘Python工程师标准>>>

CSS 中position:absolute的定位到底是相当于body，还是父级元素的问题

position:absolute的定位是一个相对麻烦的问题。

首先在文档流中，定义为position:absolute的元素已经被删除了。

那它的定位到底是相对于body，还是父级元素呢？

结论如下：

position:absolute是相对于他的包含块中第一个有position:absolute或者position:relative属性的父级元素，如果都没有，就是相对于body。

举例如下：

1、它的父级元素都没有，就是相对于body定位的。

复制代码

<!DOCTYPE html>

<html>
<head>
    <title>test</title>
</head>

<body>
    <div style="width:200px;height:200px;background-color:red;">
        <div style="width:100px;height:100px;background-color:blue;">
            <div style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
        </div>
    </div>
</body>
</html>

复制代码

2、它的父级元素里有，就是相对于哪个有的父级元素。

例一：相对于第一个div定位

复制代码

<!DOCTYPE html>

<html>
<head>
    <title>test</title>
</head>

<body>
    <div style="width:200px;height:200px;background-color:red;position:absolute;">
        <div style="width:100px;height:100px;background-color:blue;">
            <div style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
        </div>
    </div>
</body>
</html>

复制代码

例二：相对于第二个div定位

复制代码

<!DOCTYPE html>

<html>
<head>
    <title>test</title>
</head>

<body>
    <div style="width:200px;height:200px;background-color:red;position:absolute;">
        <div style="width:100px;height:100px;background-color:blue;position:relative;">
            <div style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
        </div>
    </div>
</body>
</html>

复制代码

转载于:https://my.oschina.net/fadoudou/blog/1142735