学习笔记 css position absolute relative 区别

约定不等于承诺〃 2023-02-14 03:12 26阅读 0赞

[学习笔记 css position absolute relative 区别][css position absolute relative]

*  相对定位

元素相对于他的起点进行移动，可以设置水平或垂直位置。

在使用相对定位时，无论是否进行移动，元素任然占据原来的空间。

![20200531224426382.png][]

<html>
    	<head>
    		<style>
    			#div1 {
    				width: 100px;
    				height: 100px;
    				background-color: blue;
    				border: 1px solid;
    			}
    			#div2 {
    				position: relative;
    				left: 20px;
    				top: 20px;
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				border: 1px solid;
    			}
    			#div3 {
    				width: 100px;
    				height: 100px;
    				background-color: gray;
    				border: 1px solid;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="div1">
    		</div>
    		<div id="div2">
    		</div>
    		<div id="div3">
    		</div>
    	</body>
    </html>

*  绝对定位

元素位置相对于最近的已定位的祖先元素。

绝对定位不占据空间。

![20200531224614417.png][]

<html>
    	<head>
    		<style>
    			#div1 {
    				width: 100px;
    				height: 100px;
    				background-color: blue;
    				border: 1px solid;
    			}
    			#div2 {
    				position: absolute;
    				left: 20px;
    				top: 20px;
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				border: 1px solid;
    			}
    			#div3 {
    				width: 100px;
    				height: 100px;
    				background-color: gray;
    				border: 1px solid;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="div1">
    		</div>
    		<div id="div2">
    		</div>
    		<div id="div3">
    		</div>
    	</body>
    </html>

[css position absolute relative]: https://blog.csdn.net/InJavaWeTrust/article/details/106463003
[20200531224426382.png]: https://img-blog.csdnimg.cn/20200531224426382.png
[20200531224614417.png]: https://img-blog.csdnimg.cn/20200531224614417.png