absolute vs fixed - 秒客网

 <!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的更多相关文章

position&colon;absolute/relative/fixed小结
1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...
[转]关于position 的 static、relative、absolute、fixed、inherit
本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...
z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效&period;
今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...
CSS+DIV定位分析(relative,absolute,static,fixed)
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
position 有五个值：static、relative、absolute、fixed、inherit。
position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...
position的absolute与fixed，absolute与relative共同点与不同点
absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上不同点: absol ...
[转]Html position（static、relative、absolute、fixed）
转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.a ...
CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
前端~定位属性position（relative、absolute、fixed）的分析
前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

随机推荐

Mysql--学习笔记（==》简单查询三）
-- 查看查询数据显示SELECT * FROM student; -- 显示一部分信息的查询SELECT sname 姓名,sscore 成绩,saddress 家庭住址 FROM student; ...
DBGridEh 点击表头排序方法
方法1: (不用编程写代码) 程序中引用单元 EhLibCDS设置DBGridEh的属性: ColumnDefValues.Title.TitleButton = True Op ...
Python实现二叉树的前序遍历、中序遍历
计算根节点到叶子节点的所组成的数字(1247, 125, 1367)以及叶子节点到根节点组成的数字(7421, 521, 8631),其二叉树树型结构如下计算从根节点到叶子节点组成的数字,本质上来说 ...
NVMe 与 AHCI
http://elf8848.iteye.com/blog/1731274 AHCI: NCQ技术,600MB/S,一个队列,每个队列32个指令 NVME:65000个队列,每个队列65000指令,3 ...
创建文档和自定义的qt assistant
利用qt制作帮助文档 1. 创建文档即是一些html文件,这里可以使用qt提供的工具像是qdoc 和Doxygen生成帮助的html文档. 2. 组织文档结构用于qt ...
Python3的第一个程序
软件:Anaconda Navigator集成开发环境中的Spyder,自带Python,无需单独安装. 注意:Python对缩进和空格敏感,代码必须对齐(包括注释),否则出现错误unexpected ...
【调优】kafka性能调优
主要优化原理和思路 kafka是一个高吞吐量分布式消息系统,并且提供了持久化.其高性能的有两个重要特点: 利用了磁盘连续读写性能远远高于随机读写的特点: 并发,将一个topic拆分多个partitio ...
洛谷 P3990 [SHOI2013]超级跳马解题报告
P3990 [SHOI2013]超级跳马题目描述现有一个\(n\) 行 \(m\) 列的棋盘,一只马欲从棋盘的左上角跳到右下角.每一步它向右跳奇数列,且跳到本行或相邻行.跳越期间,马不能离开棋盘. ...
[Sass] Level 4&colon; Extend -- Ex
Better use @extend with % placeholder. Extend is useful when you want to reuse some of you class. Al ...