【web前端(十七)】html_相对定位

最新推荐文章于 2025-04-30 11:58:35 发布

原创最新推荐文章于 2025-04-30 11:58:35 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

Java 专栏收录该内容

118 篇文章

订阅专栏

本文通过一个实例，详细解析了CSS中相对定位的概念与应用。相对定位元素会在文档流中保留其原始位置，然后根据top、right、bottom、left属性相对于原始位置进行偏移。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相对定位</title>
		<style>
			/*所谓的相对定位，
			 即是在原来位置的基础上，
			 进行位置的调整。*/
			
			.aaa{
				width:100px;
				height:100px;
				background-color: #008000;
				margin-top: 100px;
				position:relative;
				top: 200px;
				left: 200px;
			}
			
			.bbb{
				width:100px;
				height:100px;
				background-color: #00FF00;
			}
		</style>
	</head>
	<body>
		<div class="aaa">
			
		</div>
		
		<div class="bbb">
			
		</div>
	</body>
</html>