CSS position属性实例与总结

最新推荐文章于 2024-06-24 06:47:08 发布

Olivia0319

最新推荐文章于 2024-06-24 06:47:08 发布

阅读量335

点赞数

文章标签： CSS position

本文链接：https://blog.csdn.net/Olivia0319/article/details/82667525

版权

position属性用来规定元素的定位类型，一共有如下几种取值：

值	描述
absolute	绝对定位，相对于position属性为static定位以外的祖先元素进行定位。如若没有定位过的祖先，则相对于文档左上角的位置进行定位。此时元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性来规定。
relative	相对定位，相对于其正常位置进行定位。即相对于原来的自己进行移动，原来的位置则空在那不会被别的元素占用
static	该值是默认值。表示没有定位，元素出现在正常的流中。此时top, bottom, left, right 或者 z-index都不起作用。
fixed	也表示绝对定位，但是是相对于浏览器窗口进行定位。

**absolute属性：**采用该值进行绝对定位的元素不会被预留空间，脱离文档流，可以设置外边距，且不会与其他边距进行合并的。该元素相对于非static祖先元素进行定位，当祖先元素设置了margin、padding等值时，相对于祖先元素的padding开始点即从padding的左上角开始定位。并且也会对该元素的兄弟元素位置造成影响，因为此时相当于把该元素往 Z 轴方向移了一层，元素脱离了普通流，所以不再占据原来那层的空间，并且还会覆盖下层的元素。并且该元素将变为块级元素且元素的宽度由原来的100%变为了 auto。
relative属性： 根据给定的top，left等值相对于自身的位置进行偏移。当left和right同时存在，仅只有left有效，当top和bottom同时存在仅只有top有效。若设置了margin，padding等值时则相对于margin左上角进行偏移。
fixed属性： 特殊的absolute属性，只相当于body进行偏移。
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#div1{
				width:100px;
				height:100px;
				background-color: #eee;
			}
			#div2{
				width:100px;
				height:100px;
				background-color: #555;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="div1">div1</div>
			<div id="div2">div2</div>
		</div>
	</body>
</html>

这里写图片描述
此时若将div1的样式改为如下，则效果图如下所示：

#div1{
	width:100px;
	height:100px;
	background-color: #eee;
	position:absolute;
	top:50px;
	left:50px;
}

这里写图片描述
从图片可以看出，absolute定位的元素脱离了文档流。
此时若将div2的样式改为如下，则效果图如下所示：

#div1{
	width:100px;
	height:100px;
	background-color: #eee;
}
#div2{
	width:100px;
	height:100px;
	background-color: #555;
	position:relative;
	top:20px;
	left:20px;
}

这里写图片描述
relative定位的元素总是相对于自身进行偏移。
将css样式设置为如下：

#div1{
	width:100px;
	height:100px;
	background-color: #eee;
}
#div2{
	width:100px;
	height:100px;
	background-color: #555;
	position:absolute;
	top:50px;
	left:50px;
}
#main{
	margin-left:100px;
	margin-top:100px;
	padding:20px;
	border:1px solid black;
	position:absolute;
}

这里写图片描述
可见将父元素设置为absolute之后，子元素设置为absolute属性就是相对于父元素的padding左上角进行定位了。并且块级元素设置了absolute之后，宽度从100%变成了auto。
当设置css样式如下：

#div1{
	width:100px;
	height:100px;
	background-color: #eee;
	border:1px solid black;
	margin-top:50px;
	margin-bottom:50px;
}
#div2{
	width:100px;
	height:100px;
	background-color: #555;
	border:1px solid red;
	margin-top:50px;
}

效果图为：
这里写图片描述
可见此时两个div的外边距是会合并的；
当设置div2的position属性为absolute时，再设置div2的外边距则不会与别的元素外边距进行合并，如下所示：

#div1{
	width:100px;
	height:100px;
	background-color: #eee;
	border:1px solid black;
	margin-top:50px;
	margin-bottom:50px;
}
#div2{
	width:100px;
	height:100px;
	background-color: #555;
	border:1px solid red;
	margin-top:50px;
	position:absolute;
}

这里写图片描述

Olivia0319

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS position属性实例与总结

position属性用来规定元素的定位类型，一共有如下几种取值：值描述 absolute 绝对定位，相对于position属性为static定位以外的祖先元素进行定位。如若没有定位过的祖先，则相对于文档左上角的位置进行定位。此时元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性来规定。 relative 相对定位...
复制链接

扫一扫