<!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. 用DIV+Css+Jquery 实现的旧版微信飞机大战。

    用jquery 实现的旧版微信飞机大战. 以前一直都是做后台和业务逻辑,前端很少去做, 现在个小游戏. 方向键控制方向,Ctrl 键 放炸弹(当然你的有炸弹,哈哈)! 主要都是用div+Css实现的, ...

  2. 【2012长春区域赛】部分题解 hdu4420—4430

    这场比赛特点在于两个简单题太坑,严重影响了心情..导致最后只做出两题....当然也反映出心理素质的重要性 1002: 题意:一个矩阵b[n][n]通过数组 a[n]由以下规则构成,现在已知b[n][n ...

  3. POJ1743---Musical Theme （后缀数组+二分）

    题意 :求最长不相交重复子串的长度.. 可以先求出LCP,,对于长度 二分出答案..(竟然不会写二分) #include <set> #include <map> #inclu ...

  4. cf202-div 1-B - Apple Tree：搜索，数论，树的遍历

      http://codeforces.com/contest/348/problem/B   B. Apple Tree time limit per test 2 seconds memory l ...

  5. java笔记3之赋值运算符

    赋值运算符:        基本的赋值运算符:=            把=右边的数据赋值给左边.          扩展的赋值运算符:+=,-=,*=,/=,%=            += 把左边 ...

  6. MsgBox-官方文档

    http://s3.envato.com/files/293712/index.html

  7. android SlidingTabLayout实现ViewPager页卡滑动效果

    先来张效果图(能够滑动切换页卡) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGVuZ2t2/font/5a6L5L2T/fontsize/400/fi ...

  8. 局域网指定 IP 地址后无法上网的问题

    子网掩码.默认网关.DNS 与局域网设置有关,建议指定前先 运行 cmd -> ipconfig /all 查看一下自动获取的信息. 另外留意指定IP 后需打开高级设置 -> WINS,勾 ...

  9. 获取scrollTop兼容各浏览器的方法，以及body和documentElement

    1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...

  10. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...