您的位置: 首页  >  文章  >  position三大属性的区别

position三大属性的区别

分类: 文章 • 2024-02-05 09:58:52

html中position定位三大属性使用区别

首先我们要知道position三大属性分别是：static、relative、absolute

下面我们用一个简单的实例来更直观的体会他们各自的作用:
创建一个简单的html文件

<!DOCTYPE html>
<html>
<head>
	<title>html中position三大属性区别</title>
	<style type="text/css">
		.out{
			width:500px;
			height:500px;
			background-color:skyblue;
			}
	</style>
</head>
<body>
     <div class="out">
     	  <div class="in">
     	  	  <p>position</p>
     	  	  <h5>station</h5>
     	  </div>
     </div>
</body>
</html>

此时我们看到的页面效果是这样的:
图1
position三大属性的区别
如果我们在把out的样式中加入position,结果如下：

       position: static;
			top:30px;
			left:30px;

图2
position三大属性的区别

由图1和图2，可以得出static:position的默认方式

接着，我们再把in的css样式添加好:

.in{
			width:300px;
			height:300px;
			background-color: pink;
			top:30px;
			left:30px;
		}

测试结果:
图3
position三大属性的区别
再把position属性设置为relative,测试结果:
图4
position三大属性的区别
对比图3图4不难发现，背景颜色为pink的in盒位置较其原始位置发生了左移30px，下移30px变化。

由此，我们可以得出relative：相对于原始位置定位。

然后，把最里面的p和h5标签赋予css样式

 p{
			margin:0;
			background-color: red;
			top:30px;
			left:30px;
		}
 h5{
			margin:0;
			background-color: orange;
		}

测试结果:
图5
position三大属性的区别
把背景颜色为红色的p标签css样式加入absolute属性:

position: absolute;

观察结果:
图6
position三大属性的区别
这是我们可以看到p标签的内容和位置都发生了变化。当我们把背景颜色为粉色in的position属性设为默认(static),把背景颜色为蓝色的out的position设置为relative时，我们再次观察结果:
图7
position三大属性的区别
我们可以发现背景颜色为红色的p标签较背景颜色为蓝色的out标签(p的爷爷)位置发生了定位改变。

由图5图6图7可知，absolute:相对于最近的定位属性（非static）祖先标签的内边距边界定位。

此外，如果我们将p的position属性也设置为relative,那么会怎样呢？
图8
position三大属性的区别
对比图7图8可以清楚的看到,当p标签position为relative时，虽然已经发生了定位，但原始位置依然存在，absolute时原始位置则消失。

小结:

                综上所述，static时为默认属性，不发生定位。
                relative:相对原始位置定位且原始位置依然存在。
                absolute:相对于最近的定位祖先（非static）的内边距边界定位且原始位置消失,内容也会随之发生变化。

相关推荐