CSS学习 定位

1 为什么需要定位

(1) 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
(2) 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

2 定位组成

(1) 定位 = 定位模式 + 边偏移
<!-- 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 -->
(2) 定位模式
		<1> static:静态定位
		<2> relative:相对定位
		<3> absolute:绝对定位
		<4> fixed:固定定位
(3) 边偏移
	边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。
		<1> top:顶端偏移量，定义元素相对于其父元素上边线的距离。
		<2> bottom:底部偏移量，定义元素相对于其父元素下边线的距离。
		<3> left:左侧偏移量，定义元素相对于其父元素左边线的距离。
		<4> right：右侧偏移量，定义元素相对于其父元素右边线的距离。

3 定位

<!-- 标准流在第一层，浮动在第二层，地位在第三层。 -->
<!-- 定位两大特点：是否占有位置（脱标否），以谁为基准点移动位置。 -->
<!-- 若边偏移为top和left，则位于左上角；若边偏移为bottom和right，则位于右下角。 -->
(1) 静态定位static
	<1> 语法
		选择器 { position: static; }
	<2> 特点
		<2.1> 静态定位按照标准流特性摆放位置，它没有边偏移。
		<2.2> 静态定位在布局时很少用到。
(2) 相对定位relative
<!-- 成为绝对定位的祖先元素 -->
	<1> 语法
		选择器 { position: relative; }
		<!-- 若不使用边偏移，与普通标准流没区别。 -->
	<2> 特点
		<2.1> 它是相对于自己*原来的位置*来移动的。
		<2.2> 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标）。
		<!-- 占有的使边偏移以前的位置，而不是以后的。 -->
(3) 绝对定位absolute
<!-- 让盒子自由的在某个盒子内移动位置 -->
	<1> 语法
		选择器 { position: absolute; }
	<2> 特点
		<2.1> 如果没有祖先元素或者祖先元素没有定位，则以*浏览器*为准定位（Document文档）。
		<!-- 若父元素是浮动，仍以浏览器为准。 -->
		<2.2> 如果祖先元素有定位（相对、绝对、固定定位），则以*最近一级的有定位祖先元素*为参考点移动位置。
		<!-- 若父元素没有定位，父元素的父元素定位，则子元素以父元素的父元素为准。 -->
		<2.3> 绝对定位不再占有原先的标准流位置（脱标）。
		<!-- 移动前和移动后都不占有标准流位置。 -->
	<3> 子绝父相
		<3.1> 因为父级需要占有位置且约束绝对定位子级，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
		<3.2> 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
		<3.3> 父盒子需要加定位限制子盒子在父盒子内显示。
		<3.4> 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
(4) 固定定位fixed
<!-- 固定屏幕中某个位置 -->
	<1> 语法
		选择器 { position: fixed; }
	<2> 特点
		<2.1> 以浏览器的*可视窗口*为参照点移动元素。
		<!-- 跟父元素没有任何关系。 -->
		<!-- 不随滚动条滚动。 -->
		<2.2> 固定定位不在占有原先的位置（脱标）。
		<!-- 固定定位也是脱标的，其实固定定位也可以看做是一种以浏览器的可视窗口为参照点的绝对定位。 -->
	<3> 固定在版心右侧位置
		<3.1> 让固定定位的盒子 left: 50% 走到浏览器可视区（也可以看做版心）的一半位置。
		<3.2> 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走版心宽度的一半位置。
(5) 粘性定位sticky
<!-- 到达某个位置后便固定屏幕中 -->
	<1> 语法
		选择器 { position: sticky; }
	<2> 特点
		<2.1> 以浏览器的*可视窗口*为参照点移动元素。
		<2.2> 粘性定位占有原先的位置（不脱标）。
		<2.3> 必须添加 top 、left、right、bottom 其中一个才有效。
		<!-- top:10px 意为上方与浏览器的可视窗口相距10px时，粘性定位生效。 -->