HTML+CSS实战(二)——固定层效果

(一)、position定位
position属性,又称position定位,
1、有3种形式的定位：静态定位、相对定位、绝对定位。
2、影响因素： 1.属性的取值，2.元素偏移量，3.元素偏移参照基准
3、position属性四种取值：static–静态定位， relative–相对定位，absolute–绝对定位，fixed–固定定位。
4、绝对定位特点【absolute与fixed同属于绝对定位】：完全脱离标准文档流，兄弟元素不再受其影响

(二)、absolute与fixed的对比
一、absolute与fixed相同点：（都属于绝对定位形式）
1.完全脱离标准文档流
2.未设置偏移量时，都定位在父元素的左上角。
偏移量——元素设置定位（绝对或相对）后
就具有偏移属性和堆叠属性（z-index）
二、不同点：
设置偏移量时：absolute：1、无已定位祖先元素，以html为基准；2、有已定位祖先元素，以距其最近，已定位的祖先元素为基准。fixed：有无已定位祖先元素都以浏览器可视窗口为基准偏移。
表现形式（产生滚动条时）：absolute：位置随滚动条变化；fixed：1、位置不随滚动条变化；2、被其遮盖的元素可从其下穿过。

(三)偏移量
什么时候该设置偏移量？
在对元素设置固定定位时，如果希望本元素包含起父包含块中，不需要对其设置偏移量。
{position: fixed;}没有设置偏移量的方向依然会保持在父包含块。
也就是说：
在其没有设置偏移量的时候，偏移量参数值默认为当前fixed的元素与浏览器可视窗口的偏移数值！
同理，对于{position: absolute;}的元素也是一个道理，没有设置的偏移量数值默认为当前其相对与最近的有{position: relative;}的祖先元素的偏移数值！