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" 属性进行规定。
				 *				1.会使元素脱离文档流
				 *				2.如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位，一般开启了子元素的绝对定位都会开启父元素的相对定位
				 *				3.会使元素提升一个层级
				 *				4.脱离文档流，改变元素性质：
				 *					内联元素会变成块元素，块元素的宽度和高度默认被内容撑开
				 *
				 *			fixed  生成绝对（固定）定位的元素，永远是相对于浏览器窗口进行定位，其他和absolute一样
				 *				元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
				 *				会固定在浏览器的某个位置，不会随滚动条滚动
				 *				IE6不支持固定定位
				 *
				 *			relative 生成相对定位的元素，相对于其正常位置进行定位。
				 *				因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
				 *				相对定位是相对于元素在文档流中原来的位置进行定位，不会脱离文档流，会使元素提升一个层级
				 *				不会改变元素的性质
				 *
				 *			static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
				 *
				 */

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