<!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. Android双击返回键退出Activity的两种方法

    在开发应用程序的时候,有一种功能是非常常用到的,那就是迅速双击返回按钮,然后实现退出Activity的功能.本人在网上看了很多资料代码,总结起来,主要有两种比较好的方式.一种是开线程延时执行,一种是记 ...

  2. MFC界面更新实现方法

    1.更新窗口 即采用UpdateWindow()函数立即发送WM_PAINT消息更新整个窗口. void CEditTestDlg::OnBnClickedBtnSysUpdate() { CStri ...

  3. 【疑难杂症】xmind启动后，自动退出的问题

    xmind安装一段时间后,就会出现一启动,就自动退出的情况.卸载重装也无法解决,在试过网上的各种方法后,发现这个方法最凑效. 打开xmind.ini(安装目录下),删除以下几行,保存配置文件,重启即可 ...

  4. HDU4432 Sum of Divisors

    涉及知识点: 1. 进制转换. 2. 找因子时注意可以降低复杂度. Sum of divisors Time Limit: 2000/1000 MS (Java/Others)    Memory L ...

  5. flume的自定义sink-Kafka

    1.创建一个agent,sink类型需指定为自定义sink        vi /usr/local/flume/conf/agent3.conf        agent3.sources=as1  ...

  6. uva 10714 Ants(贪心）

    题目连接:10714 - Ants 题目大意:一根棍子上有n只蚂蚁, 这些蚂蚁开始可以任意朝着一个方向移动一直走,向左或是向右,并且移动速度是相同的,但是一旦蚂蚁碰到迎面走来的另一只蚂蚁,那么这两只蚂 ...

  7. LeetCode - 204. Count Primes - 埃拉托斯特尼筛法 95.12% - (C++) - Sieve of Eratosthenes

    原题 原题链接 Description: Count the number of prime numbers less than a non-negative number, n. 计算小于非负数n的 ...

  8. springMVC学习(1)

    spring mvc的位置: springMVC只是spring的一个模块:   第一步:发起请求到前端控制器(DispatcherServlet) 第二步:DispatcherServlet请求Ha ...

  9. J2EE基础总结（4）——JSP

    什么是JSP       JSP全名为Java Server Pages,中文名叫javaserver页面,其根本是一个简化的Servlet设计,它是由Sun  Microsystems公司倡导.很多 ...

  10. 近段时间学习html和ＣＳＳ的一些细碎总结

    1.边框圆角属性:border-radius,取值能够是 百分比 / 自己定义长度,不能够取负值.假设是圆,将高度和宽度设置相等,而且将border-radius设置为100% 2.IE6,IE7,I ...