absolute和fixed的相同点：

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

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

absolute和fixed的不同点：

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

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

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

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

　　第二、表现形式（产生滚动条时）

　　absolute：位置会随滚动条变化

　　fixed：1、位置固定，不会随滚动条变化

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

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

案例：1 固定层效果

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

一、HTML和CSS基础--网页布局--实践--固定层效果的更多相关文章

  1. 一、HTML和CSS基础--网页布局--实践--导航条菜单的制作

    案例一:导航菜单的制作 垂直菜单

  2. 一、HTML和CSS基础--网页布局--网页布局基础

    W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...

  3. 一、HTML和CSS基础--网页布局--如何用css进行网页布局

    什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...

  4. 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

    结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...

  5. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  6. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  7. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  8. 利用css进行网页布局

    网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...

  9. css:层叠样式表-网页布局基础

    css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...

随机推荐

  1. linux java cpu 100%

    1.用top找到最耗资源的进程id [ bin]# toptop - 16:56:14 up 119 days, 6:17, 7 users, load average: 2.04, 2.07, 2. ...

  2. Swift开发学习-01 Swift介绍

    本教程是笔者在自学IOS/Swift知识的总结,适用于通过对Objictive C编程的运用并需要了解基于iOS程序的iPhone和iPad的程序员.做一个有bigger的’攻城狮‘,有尊严的工作,快 ...

  3. 写给iOS程序员的命令行使用秘籍

    http://www.jianshu.com/p/44d3b8f713f2 Mac OS是Unix系统的分支,有着强大的命令行功能.很多事情在命令行下处理会事半功倍,所以我就iOS程序员可能会用到的功 ...

  4. JavaScript input file上传前获取文件名、文件类型、文件大小等信息

    document.getElementById("productImgInput").files[0].type document.getElementById("pro ...

  5. PHP 与网址相关内容

    在PHP中,有时需要知道脚本所处的位置,这时会用到$_SERVER['SCRIPT_NAME'].$_SERVER['SCRIPT_FILENAME']及__FILE__.那么他们之间有什么不同呢? ...

  6. Linux下scp命令使用

    linux下scp命令主要是用来远程拷贝文件,下面介绍两种使用方法 1,拷贝本机文件到远程文件 举例子:把我本地的change目录下的changeFile.txt上传到远程192.168.2.88的k ...

  7. POJ 2513 Colored Sticks

    Colored Sticks Time Limit: 5000MS   Memory Limit: 128000K Total Submissions: 28036   Accepted: 7428 ...

  8. 用LR12录制app，用LR11跑场景，无并发数限制，已试验过，可行！

    免费使用LoadRunner对移动互联网后端服务器压力测试 一.LoadRunner简介 LoadRunner,是惠普公司研发的一款预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及 ...

  9. Java Session 介绍;

    为什么需要Session 这是为了填补 Http 协议的局限,当用户去访问一个页面,服务端返回完了请求(如,你访问完一个网页,这个页面将页面内容,界面UI呈现给你),就算是结束了,就断开了,服务端不再 ...

  10. [Effective JavaScript 笔记]第42条：避免使用轻率的猴子补丁

    41条对违反抽象原则行为的讨论之后,下面聊一聊终极违例.由于对象共享原型,因此每一个对象都可以增加.删除或修改原型的属性.这个有争议的实践通常称为猴子补丁. 猴子补丁示例 猴子补丁的吸引力在于其强大. ...