一、HTML和CSS基础--网页布局--实践--固定层效果

absolute和fixed的相同点:

  第一,完全脱离标准文档流

  第二,未设置偏移量时,都定位在父元素的左上角

absolute和fixed的不同点:

  第一、当设置偏移量时,偏移参照基准不同

  absolute:1、没有已经定位的祖先元素,以<html>为基准偏移

             2、有已经定位的祖先元素,以距其最近的、已定位的祖先元素为基准偏移

  fixed:有、无已定位的祖先元素,都以浏览器可视窗口为基准偏移

  第二、表现形式(产生滚动条时)

  absolute:位置会随滚动条变化

  fixed:1、位置固定,不会随滚动条变化

        2、被它遮盖的元素,可以从其下穿过

在对元素设置固定定位时,如果希望本元素包含在其父包含块中,不需要对其设置偏移量(可以以京东商品介绍栏为例)

案例:1 固定层效果

一、HTML和CSS基础--网页布局--实践--固定层效果

实现方法:将此区域设置为position:fixed,top:0,left:0 注意当设置为固定定位的时候,此区域即脱离了标准文档流,其后面的内容会占据定位元素的位置。注意设置后面的内容的上边距(固定定位层的高度+原有边距)。

上一篇:Xcode中的几个常用文件路径


下一篇:(C#)Windows Shell 编程系列1 - 基础,浏览一个文件夹