position三大属性的区别

最新推荐文章于 2021-07-12 14:41:48 发布

小脑斧v587

最新推荐文章于 2021-07-12 14:41:48 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42458464/article/details/88760799

版权

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
在这里插入图片描述
如果我们在把out的样式中加入position,结果如下：

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

图2
在这里插入图片描述

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

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

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

测试结果:
图3
在这里插入图片描述
再把position属性设置为relative,测试结果:
图4

对比图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
在这里插入图片描述
把背景颜色为红色的p标签css样式加入absolute属性:

position: absolute;

观察结果:
图6
在这里插入图片描述
这是我们可以看到p标签的内容和位置都发生了变化。当我们把背景颜色为粉色in的position属性设为默认(static),把背景颜色为蓝色的out的position设置为relative时，我们再次观察结果:
图7

我们可以发现背景颜色为红色的p标签较背景颜色为蓝色的out标签(p的爷爷)位置发生了定位改变。

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

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

小结:

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

小脑斧v587

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
position三大属性的区别

html中position定位三大属性使用区别首先我们要知道position三大属性分别是：static、relative、absolute下面我们用一个简单的实例来更直观的体会他们各自的作用:创建一个简单的html文件<!DOCTYPE html><html><head> <title>html中position三大属性区别</...
复制链接

扫一扫