<!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>
position三种属性的区别
最新推荐文章于 2024-09-11 20:31:47 发布