absolute和fixed的相同点:
第一,完全脱离标准文档流
第二,未设置偏移量时,都定位在父元素的左上角
absolute和fixed的不同点:
第一、当设置偏移量时,偏移参照基准不同
absolute:1、没有已经定位的祖先元素,以<html>为基准偏移
2、有已经定位的祖先元素,以距其最近的、已定位的祖先元素为基准偏移
fixed:有、无已定位的祖先元素,都以浏览器可视窗口为基准偏移
第二、表现形式(产生滚动条时)
absolute:位置会随滚动条变化
fixed:1、位置固定,不会随滚动条变化
2、被它遮盖的元素,可以从其下穿过
在对元素设置固定定位时,如果希望本元素包含在其父包含块中,不需要对其设置偏移量(可以以京东商品介绍栏为例)
案例:1 固定层效果
实现方法:将此区域设置为position:fixed,top:0,left:0 注意当设置为固定定位的时候,此区域即脱离了标准文档流,其后面的内容会占据定位元素的位置。注意设置后面的内容的上边距(固定定位层的高度+原有边距)。