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. mongo操作

    详细使用网址:http://blog.csdn.net/xinghebuluo/article/details/7050811 MongoDB基本使用 成功启动MongoDB后,再打开一个命令行窗口输 ...

  2. xss跨站攻击测试代码

    '><script>alert(document.cookie)</script> ='><script>alert(document.cookie)& ...

  3. c# 解析JSON的几种办法（转载）

    对比 .NET下几种常见的解析JSON方法 主要类 命名空间 限制 内建LINQ支持 DataContractJsonSerializer System.Runtime.Serialization.J ...

  4. 回家前的挣扎——SQLite增删改查

    引言 最后一天,公司就两个人,也不知道弄点什么,就在网上找了Sqlite的文档,看了看,这里也是现学现卖,给自己找点事做,感觉时间过得还是比较快的,不然焦急等待,滋味不好受啊. SQLite简介 SQ ...

  5. http 超文本传输协议

    超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.设计HTTP最初的目的是为了提供一种发布和接 ...

  6. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  7. Codeforces Round #FF (Div. 2) C. DZY Loves Sequences

    解题报告:输入一个数列,选取一个子数列,要求最多只能改动这个子数列中的一个数,使得这个子数列是严格的升序的(严格升序没有相等的) 我的做法是,第一步把这个 数列的每个升序的子数列都找出来,然后看这些子 ...

  8. NGUI 粒子显示在上级

    http://bbs.taikr.com/thread-2272-1-1.html [NGUI]3.0+版本,粒子在UI后面显示 -- : 48人阅读 评论() 收藏 举报 [Unity3D][NGU ...

  9. 腾讯即时聊天sdk

    一. 初始化 腾讯即时通讯sdk 1. 程序日志注册 2. 连接通知回调  专门的类管理 3. 信息通知回调 专门的类 4. 初始化sdk 5. 注册推送 分ios8/ios以前 注册推送成功回调 发 ...

  10. 《ASP.NET MVC4 WEB编程》学习笔记------UrlHelper

    HtmlHelper帮助我们生成Html标记代码:UrlHelper帮助我们生成URL链接地址 我们学习一下UrlHelper帮助类,看类名也都知道这个类是用来帮我们生成URL在ASP.NET MVC ...