[CSS]定位(基本)

概念：让盒子自由的在某个盒子内部移动位置，或固定在屏幕的某个位置，并且可以压住其他盒子。

定位=定位模式+边偏移。

 

定位模式：

static　　　　　静态定位

relative　　　　相对定位

absolute　　　  绝对定位

fixed　　　　 　固定定位

sticky　　　　　粘性定位

 

边偏移：

top、bottom、left、right

 

1.static 静态定位

是默认定位模式，即标准流。

 

2.relative 相对定位

根据自身原来的位置定的。

特点：原来标准流的位置继续占有，不脱标。

典型应用：作绝对定位的父级。

 

3.absolute 绝对定位

相对于它的祖先元素的位置定的。

特点：1.如果没有祖先元素，或祖先元素没有定位，则根据浏览器定位（Document）。

　　　2.如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位的祖先元素为参考点。

　　　3.绝对定位不占有原来的位置，即脱标。

 

*子绝父相* （最常用）

1.子级绝对定位，不会占有位置，可以放到父盒子的任何地方，不影响任何兄弟盒子。

2.父盒子需要加定位，限制子盒子在父盒子内显示。

3.父盒子需要占有位置，因此只能是相对定位。

 

4.fixed 固定定位

固定于浏览器的可视区域，页面滚动时，元素位置不会变动。

特点：1.以浏览器的可视区为参照点移动元素。

　　　2.跟父元素没有任何位置关系。

　　　3.不随滚动条滚动。

　　　4.不占有原来的位置，即脱标。　　（可以看成特殊的绝对定位）

 

5.sticky 粘性定位

相对定位和固定定位的混合。

特点：1.以视窗为参照点移动元素。

　　　2.粘性定位站由原先的位置。

　　　3.必须添加top、left、right、bottom其中一个，才生效。

跟页面滚动搭配使用，兼容性差，IE浏览器不适用。

 

以下摘自黑马程序员：