HTML5绝对位置

最新推荐文章于 2024-10-17 18:55:09 发布

原创最新推荐文章于 2024-10-17 18:55:09 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html绝对位置

前端专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了CSS中绝对定位的应用，通过具体实例展示了如何使用绝对定位来精确定位页面元素，包括div和p标签的位置调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<!--位置：相对：
			绝对：以父容器左上角为原点，向右、向下为正坐标
		-->
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				position: absolute;
				left: 50px;
				top: 70px;
				width: 200px;
				height: 200px;
				border: 1px dotted red;
				background-color: yellow;
			}
			p{
				position: absolute;
				left: 20px;
				top: 50px;
				
			}
		</style>
	</head>
	<body>
		<!--<div></div>-->
		<div>
			<p>你好</p>
		</div>
		
	</body>
</html>