欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页 > IT编程

css中position:absolute和relative的知识点

程序员文章站 2024-01-28 17:35:40

几年前学习了css。。。一头雾水，从没弄懂过，也就不想弄了。最近是无聊，还是要学下的，去看了别人的博客，自己搞搞，以下内容都是自己推想的，或者有错误，敬请纠正。先来看没加任何p...

几年前学习了css。。。一头雾水，从没弄懂过，也就不想弄了。最近是无聊，还是要学下的，去看了别人的博客，自己搞搞，以下内容都是自己推想的，或者有错误，敬请纠正。

先来看没加任何position的代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        #a{  
            margin: 0 auto;  
            height: 500px;  
            width: 500px;  
            background: #aeeee2;  
            z-index: -1;  
        }  
        #b{           
            height: 400px;  
            width: 300px;  
            background: purple;  
        }  
        #c{  
            height: 200px;  
            width: 200px;  
            background: blue;  
        }  
        #d{  
            height: 100px;  
            width: 100px;  
            background: black;  
        }  
  
    </style>  
</head>  
<body>  
    <p id="a">  
        <p id="b">  
            <p id="c">  
            <p id="d"></p>  
            </p>  
        </p>  
    </p>   
      
</body>  
</html>

1.结果如图，这里很容易理解

css中position:absolute和relative的知识点

2.然后是添加给#b紫色添加 position: relative;和left:100px;，结果是

css中position:absolute和relative的知识点

这里加了position:relative和left：100px;的紫色是相对了之前自己的位置改变了位置，left和margin-left类似吧。

3.再把蓝色加上position:relative;和top:100px;，如图结果也是可想而知，说明了position:relative; 是相对于之前自己的位置（在没加position的父元素里面）而言（其他情况欠考虑）。

css中position:absolute和relative的知识点

4.这里把黑色position设为absolute，同时加上right:0（贴在右边）; 看到结果是这样

css中position:absolute和relative的知识点

知道了黑色位置是相对蓝色（父元素）而言的，这里注意蓝色的position是relative。

5.当我们把蓝色的position设为static（默认，即删除掉position属性）时，结果是黑色贴在紫色右边，而蓝色是去掉position的位置

css中position:absolute和relative的知识点

为什么？因为absolute是相对于非static的其他position值而言的。黑色的祖先中有relative，则相对于这个祖先（紫色）而言。

6.当我们把紫色的relative改为static会出现什么情况？

css中position:absolute和relative的知识点

竟然跑出了a,b,c（此时a，b，c的p都是默认static的position（即删除position属性）），跑到了body。那只能说body是界限了喔。。。

上一篇： ES6中map遇到的问题分享

下一篇： c++内存泄漏试验

推荐阅读