css中position:absolute和relative笔记

女爷i 2021-09-23 01:50 284阅读 0赞

几年前学习了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>
    	<div id="a">
    		<div id="b">
    		    <div id="c">
    			<div id="d"></div>
    		    </div>
    		</div>
    	</div> 
    	
    </body>
    </html>

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

![70][]

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

![70 1][]

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

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

![70 2][]

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

![70 3][]

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

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

![70 4][]

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

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

![70 5][]

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

[70]: /images/20210923/0e4532d7930e4eebabd1cf337110009b.png
[70 1]: /images/20210923/1d2f8a56bef1424dad0255c1b8b0dc95.png
[70 2]: /images/20210923/ef90a6a068874958b501320f0e2c630d.png
[70 3]: /images/20210923/1fb3699cc1764748820c70b887c3ed3b.png
[70 4]: /images/20210923/79a869a08828445fbfb4d34b3c9ddbe8.png
[70 5]: /images/20210923/7ec10e5f6ca4473da03f0113600fd229.png