辛星和你彻底搞清CSS中的相对定位和绝对定位

前面我在解读CSS中也说过了关于相对定位和绝对定位的问题。无奈还是有些童鞋表示迷茫，于是另开一篇博客，来具体解读相对定位和绝对定位。希望可以以我的点点星光，让后来者少走弯路。

所谓相对定位，就是设置为相对定位的元素会偏移某个距离，元素仍然保持原来的样式，它会保留该HTML元素的空间，比方我们看例如以下代码：

.demo{

position: relative;

width:50px;

height: 50px;

left:50px;

}

它会出如今相对原来的地方向右50px的地方，而它原来所在的地方为空。

以下说一下绝对定位，所谓绝对定位。即不占用空间，假设原来这个地方有HTML元素，那么就会重叠，这里须要特别之处的，也是我发这篇博文的目的，就是想告诉大家，绝对定位假设被父元素包括，假设父元素没有定位属性，它会依据body进行定位，因此，假设它有父元素，必须在父元素中指定定位属性。例如以下代码：

<html>

<head>

	<title>辛星解读绝对定位和相对定位</title>

	<style type="text/css">

	.father{

		position: relative;

		width:300px;

		height: 300px;

		margin: 0 auto;

		border: 1px solid orange;

		}

	.sun{

		position:absolute;

		background:purple;

		width:50px;

		height: 50px;

		left: 50px;

		}

	</style>

</head>

<div class = "father">

	<div class = "sun"></div>

</div>

</html>

效果图：

可能有童鞋会问，假设我们不指定父元素的定位又会怎样呢？请看以下代码。我把css代码中的哪一行给凝视掉之后，源码例如以下：

<html>

<head>

	<title>辛星解读绝对定位和相对定位</title>

	<style type="text/css">

	.father{

		//position: relative;

		width:300px;

		height: 300px;

		margin: 0 auto;

		border: 1px solid orange;

		}

	.sun{

		position:absolute;

		background:purple;

		width:50px;

		height: 50px;

		left: 50px;

		}

	</style>

</head>

<div class = "father">

	<div class = "sun"></div>

</div>

</html>

然后是它的效果图：

以上就是我介绍的关于绝对定位和相对定位的问题，假设您有什么问题或者不解，能够在以下留言。谢谢。

巴特西

辛星和你彻底搞清CSS中的相对定位和绝对定位

最新文章

热门文章