详解CSS中的position定位

逆战班学习心得

CSS使用position属性定义对象定位显示，语法如下:
position: static | relative | absolute | fixed | sticky
CSS提供了三种基本的定位机制：文档流、浮动和绝对定位。除非专门定义，否则所有对象都在文档流中定位，也就是说流动元素的位置由元素在文档中的位置决定，块状元素从上到下一个接一个地堆叠排列，内联元素在一行中水平并列布置。
static: 默认值，对象遵循常规的文档流，此时4个定位偏移属性无效。如果元素没有特殊声明，任何元素在默认状态下都会以静态方式来确定自己的显示位置。所谓静态定位就是各个元素在HTML文档流中的位置是固定的。每个元素在文档结构中的位置决足了它们被解析和显示的顺序。
注意点：

1. 使用float 属性可以改变它们的堆叠样式，实见并列显示效果，但无法改变它们在垂直方向的先后显示顺序。
2. 使用margin负值可以改变静态对象在垂直方向的先后显示顺序。
   
   absolute: 绝对定位，是一种特殊的网页排版方式，定位对象脱离文档流，根据定位包含框来确定自己的显示位置。此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则参照body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin重叠。绝对定位对象与文档流之间不会相互、直接干扰，实现对象在网页中精确定位。

<style type="text/css">
			#box{width: 600px;height: 300px;border: 1px #000000 solid;position: relative;}
			.left,.middle,.right{position: absolute;height: 100px;width: 200px;}
			.left{left: 0px;top: 0px;background: red;}
			.middle{left: 33%;top: 33%;background:green}
			.right{bottom: 0px;right: 0px;background:blue}
		</style>

relative: 相对定位，对象遵循常规的文档流， 并且参照自身在文档流中的位置通过top、bottom、left、right这4个定位偏移属性进行偏移，偏移时不会影响文档流中的任何元素。使用相对定位元素作为定位包含框能够让定位对象避免完全脱离文档流。

h2{
				position: relative;
				/* X轴坐标 */
				left: 70px;
				/* Y轴坐标 */
				top: -15px;
			}

fixed:当出现滚动条时，对象不会随着滚动。固定定位是绝对定位的一种特殊形式，可以实现固定定位，以浏览器窗口为参照来定位对象。绝对定位absolute不受文档流的影响，但受滚动条的影响，而固定定位既不受文档流影响，也不受滚动条的影响。

div{
				width: 100px;height: 100px;
				position: fixed;
				bottom: 0px;right: 0px;
				background: red;
			}

sticky:对象在常态时遵循文档流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed. 该属性的表现是网页设计常见的吸附效果。

p:nth-of-type(4){position: sticky;top: 100px;background:yellow;}

当一个元素设置了position 属性值为absolute、relative或fixed,则该元素就具有定位参照功能，简称为定位包含框。当一个定位对象被多层定位包含框包裹，就以最近的(内层)定位包含框作,参照进行定位。没有包裹定位包含框，默认以body为定位包含框。
CSS使用top、right、bottom 和left定义定位对象的位置偏移
top: 设置对象参照定位包含框项边向下偏移位置。
right: 设置对象参照定位包含框右边向左偏移位置。
bottom 设置对象参照定位包含框底边向上偏移位置。
left: 设置对象参照定位包含框左边向右偏移位置。

注意点：这里的定位边是指内边距的内沿，定位对象是以边框外边的左上角为定位中心。
示例图：

注意点：对于absolute定位和fixed定位来说，如果没有明确水平偏移，即没有显式定义left 或right属性值，则定位对象在水平方向继续受文档流的影响:如果没有明确垂直偏移，即没有显式定义top或bottom属性值，则定位对象在垂直方向继续受文档流的影响。
以上就是我对position定位的学习总结。