<!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. PullToRefreshListView 内嵌checkbox 数据丢失问题

    在PullToRefreshListView 内部内嵌了Checkbox如下图所示: 原本设计思路是:对CheckBox 进行 setOnCheckedChangeListener 监听 当Check ...

  2. css属性之appearance

    appearance 属性允许您使元素看上去像标准的用户界面元素. 案例: 使 div 元素看上去像一个按钮 <!DOCTYPE html> <html> <head&g ...

  3. COJ 0036 数数happy有多少个？

    数数happy有多少个? 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 图图是个爱动脑子.观察能力很强的好学生.近期他正学英语 ...

  4. 【转】VS2013中如何解决error C4996: 'fopen'问题

    原文网址:http://jingyan.baidu.com/article/ce436649fd61543773afd32e.html 今天编写控制台应用程序时出现如下错误 error C4996: ...

  5. HDU_2039——判断三条边是否能组成三角形

    Problem Description 给定三条边,请你判断一下能不能组成一个三角形.   Input 输入数据第一行包含一个数M,接下有M行,每行一个实例,包含三个正数A,B,C.其中A,B,C & ...

  6. [LeetCode] 179. Largest Number 解题思路

    Given a list of non negative integers, arrange them such that they form the largest number. For exam ...

  7. android开发常用组件（库）推荐

    版本兼容:官方 support 全家桶 网络请求:Android-Async-Http.Retrofit.OkHttp.Volley图片加载:Glide 和 Universal-Image-Loade ...

  8. JS(七)

    JS又上完了,还是感觉JS技巧性很强,需要多积累经验...看了一下PHP的内容,感觉搭建环境好麻烦,结果回来下了个wamp感觉好像就可以了..... 1.红绿蓝颜色条: <!DOCTYPE ht ...

  9. SurfaceView类透明背景设置

    将SurfaceView背景设置为透明,主要添加以下几句话就可以了: 在SurfaceView创建后设置一下下面的参数: setZOrderOnTop(true); getHolder().setFo ...

  10. swift 中String常用操作

    1.  字符串定义 var s = "aaaaaa" // 两个字符串均为空并等价. var emptyString = ""   var anotherEmp ...