CSS相对定位

wobushishunv

于 2014-05-22 11:25:16 发布

阅读量116

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/wobushishunv/article/details/84601148

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

相对定位

相对定位是按照元素自身所在的位置，使用边偏移属性重新定义元素的显示位置，使用相对定位的元素依然是文档中的元素，元素的显示位置和元素所在文档中其他元素相互关联。

在确定相对定位元素位置的时候，首先要确定元素的原始位置，即元素在文档中的位置，然后根据偏移属性中定义的偏移值，确定元素的最终位置。

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#aa{
			width:100px;
			height:100px;
			background-color:#d5d5d5;
		}
		#bb{
			width:100px;
			height:100px;
			background-color:#FF0000;
			position:relative;
			left:40px;
		}
	</style>
</head>
<body>
		<div id="main">
			<div id="aa"></div>
			<div id="bb"></div>
			
		</div>
</body>
</html>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#aa{
			width:100px;
			height:100px;
			background-color:#d5d5d5;
		}
		#bb{
			width:100px;
			height:100px;
			background-color:#FF0000;
			position:relative;
			left:40px;
			top:50px;
		}
		#cc{
			width:100px;
			height:100px;
			background-color:#D9E021;
			
			
		}
	</style>
</head>
<body>
		<div id="main">
			<div id="aa"></div>
			<div id="bb"></div>
			<div id="cc"></div>
		</div>
</body>
</html>