绝对定位（relative）不脱离文档流，参照自己本身

weixin_44869420

于 2019-08-15 14:00:36 发布

阅读量2.8k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44869420/article/details/99110319

版权

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>relative</title>
    	<style>
    		.outer{ 
    			background-color: #ccc;
    		}
    		.outer > div { 
    			height: 100px;
    			
    		}
    		.outer > div.one {
    			background-color: lightblue;
    		}
    		.outer > div.two {
    			background-color: pink;
    			/*不脱离文档流*/
    			position: relative;
    			/*距离one以下50像素*/
    			top:50px;
    			left:50px;
    		}	
    
    		.outer > div.three {
    			background-color: teal;
    			position: relative;
    		}
    	</style>
    </head>
    <body>
    		<div class="outer">
    		 	<div class="one"></div>
    			<div class="two"></div>
    			<div class="three"></div>
    		</div>
    </body>
    </html>

在这里插入图片描述