position三种属性的区别

最新推荐文章于 2024-09-11 20:31:47 发布

前端-文龙刚

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量122

点赞数

分类专栏： html+css 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_17211063/article/details/128373262

版权

html+css 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>position三种属性的区别</title>
	<style type="text/css">
		div{width:120px;height:120px;border:1px solid ;}
		.div1{top:-15px;position:relative;background:blue;}
		.div2{top:20px;left:30px;background:red;position:static;}
		.div3{background:yellow;position:absolute;}
	</style>
</head>
<body>
	<p>static时为默认属性，不发生定位。</p>
    <p>relative:相对原始位置定位且原始位置依然存在。</p>
    <p>absolute:相对于最近的定位祖先（非static）的内边距边界定位且原始位置消失,内容也会随之发生变化。</p>
	<div class="div1"> DIV-1 </div>
	<div class="div2"> DIV-2 </div>
	<div class="div3"> DIV-3 </div>
</body>
</html>