<!DOCTYPE html>

 <html>

 <head>

 <title>absolute和fixed的区别</title>

 <style type="text/css">

 body{color:#fff;}

 #html{ position:relative;width:778px; height:1000px; border:1px solid #0000FF;}

 #fixed,#absolute{width:200px; height:200px; background:#FF0000;}

 #fixed{position:fixed; top:50px; left:50px;}

 #absolute{position:absolute; top:50px; left:450px;}

 </style>

 </head>

 <body>

 <div id="fixed">我在屏幕的位置不会改变</div>

 <div id="html">

 <div id="absolute">我会随屏幕滚动</div>

 </div>

 </body>

 </html>

Fixed 相对于浏览器， Absolute相对于父元素。

absolute vs fixed的更多相关文章

  1. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  2. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  3. z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

    今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...

  4. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  5. position 有五个值：static、relative、absolute、fixed、inherit。

    position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...

  6. position的absolute与fixed，absolute与relative共同点与不同点

    absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...

  7. [转]Html position（static、relative、absolute、fixed）

    转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.a ...

  8. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  9. 前端~定位属性position（relative、absolute、fixed）的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

随机推荐

  1. BZOJ3401: [Usaco2009 Mar]Look Up 仰望

    3401: [Usaco2009 Mar]Look Up 仰望 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 87  Solved: 58[Submit ...

  2. Linux企业级项目实践之网络爬虫（28）——爬虫socket处理

    Socket是进程之间交换数据的机制.这些进程即可以是同一台机器上的,也可以是通过网络连接起来的不同机器.一旦一个Socket连接建立,那么数据就能够双向传输,直到其中一端关闭连接. 通常,请求数据的 ...

  3. 切割 bitmap

    最近在安卓手机控制蓝牙打印机打印图片,有时候图片太大,考虑到bitmap的切割,在此,献上代码,各位小主指点 public class ImageSplitter { public static Ar ...

  4. jquery 滚动条 scroll 和 animate出现的问题总结

    这两天刚刚学习了jquery就想把平时做看到的一些相关效果用新的知识写写看.知识平时看着都懂,实际操作中问题才会层出不穷. <!DOCTYPE html> <html> < ...

  5. ApacheBench~网站性能测试工具

    对于网站性能测试来说,一般我们会使用loadrunner来实现,而它过于庞大,使我们感到有些不爽,而今天介绍的ApacheBench工具,它小而精,使用简单,效果直观,可以说,是比lr更好用的性能测试 ...

  6. java.util.Map.Entry接口

    java.util.Map.Entry接口主要就是在遍历map的时候用到,给你个例子:package test;import java.util.*;import java.util.Map.Entr ...

  7. android 分辨率自适应

    1.术语和概念 术语 说明 备注 Screen size(屏幕尺寸) 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 摩托罗拉milestone手机是3.7英寸 A ...

  8. C++ 推断进程是否存在

    [cpp] view plaincopyprint? #include <windows.h> #include "psapi.h" #include"std ...

  9. HDU4662+无

    把目标中的 U 转化为 I. 又因为 I的个数是有规律的:1 2 4 8 16 ...再结合可以取消 6 12 18 ...个I...得解 #include<string.h> #incl ...

  10. resin config 中文(resin.xml)

    <!-- - Resin 3.1 配置文件. --> <resin xmlns="http://caucho.com/ns/resin" xmlns:resin= ...