htmlstuty
/
相对定位.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				background-color: blue;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: red;
				/**
				 * 定位：
				 *		- 定位指的是将指定的元素摆放到页面的任意位置
				 *			通过定位可以任意摆放元素
				 *		- 通过position属性来设置元素的定位
				 *			- 可选值：
				 *			absolute 生成绝对定位的元素，相对于 离它最近 的开启了定位 的第一个父元素进行定位。
				 *				元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
				 *
				 *			fixed  生成绝对（固定）定位的元素，相对于浏览器窗口进行定位。
				 *				元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
				 *
				 *			relative 生成相对定位的元素，相对于其正常位置进行定位。
				 *				因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
				 *				相对定位是相对于元素在文档流中原来的位置进行定位，不会脱离文档流，会使元素提升一个层级
				 *				不会改变元素的性质
				 *
				 *			static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
				 *
				 */

				position: relative;
				left: 100px;
				top: 100px
			}
			.box3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>