这个问题面试被问到过~~
A:共同点:
1.改变行内元素的呈现方式,display被置为block;
2.让元素脱离普通流,不占据空间;
3.默认会覆盖到非定位元素上
 
B不同点:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。
当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。  
 
典型应用案例:
加了遮罩的居中弹窗,假如有很多屏,就得使用fixed,不然向下滚动弹窗和遮罩不会跟着走。
<input type="button" value="请点我"/>
<div class="bg"></div>
<div class="center"></div>
*{margin:; padding:;}
body{height: 6000px;}
.bg{background: #000; opacity:0.5; filter:alpha(opacity=50); width: 100%; height: 100%; top:; left:; position: fixed;}
.center{width: 500px; height: 500px; background: #fff; position: fixed; top:50%; left:50%; margin-left:-250px; margin-top:-250px;}

position的absolute与fixed共同点与不同点的更多相关文章

  1. 【对比分析四】position的absolute与fixed共同点与不同点

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

  2. position的absolute与fixed,absolute与relative共同点与不同点

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

  3. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

  4. css的position中absolute和fixed的区别

    fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...

  5. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  6. css总结1:position定位:absolute/relative/fixed

    1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...

  7. position定位-absolute与fixed

    1. absolute 生成绝对定位元素,相对于static定位以外的第一个父元素进行定位. 2. fixed 生成绝对定位元素,相对于浏览器窗口进行定位.

  8. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  9. 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

    position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...

随机推荐

  1. java 导出excel(读数据库案例)

    import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql.S ...

  2. hdu 2993 MAX Average Problem(斜率DP入门题)

    题目链接:hdu 2993 MAX Average Problem 题意: 给一个长度为 n 的序列,找出长度 >= k 的平均值最大的连续子序列. 题解: 这题是论文的原题,请参照2004集训 ...

  3. hdu_5963_朋友(找规律)

    题目链接:hdu_5963_朋友 题意: 中文,不解释 题解: 把样例拿出来看看,你会发现以x为节点是否能赢,就是与x相连的边权值的和或者异或是否为奇数. #include<bits/stdc+ ...

  4. 2016弱校联盟十一专场10.2——Around the World

    题目链接:Around the World 题意: 给你n个点,有n-1条边,现在这n-1条边又多增加了ci*2-1条边,问你有多少条欧拉回路 题解: 套用best定理 Best Theorem:有向 ...

  5. Docker私有仓库3

    http://www.cnblogs.com/womars/p/5906435.html(上篇地址) 三.测试上两篇 #测试一下 [root@lh- data]# pwd /opt/data [roo ...

  6. [kuangbin带你飞]专题四 最短路练习 POJ 3268 Silver Cow Party

    题意: 在一个有向图中求n头牛从自己的起点走到x再从x走回来的最远距离 思路一开始是暴力跑dij…… 讲道理不太可能…… 然后就百度了一下 才知道把矩阵转置的话就只需要求两次x的单源最短路…… /* ...

  7. contenteditable模仿textarea文本框

    contenteditable 属性是 HTML5 中的新属性. 例子:<p contenteditable="true" style=" border:solid ...

  8. 基于C++的顺序表的实现

    顺序表,是数据结构中按顺序方式存储的线性表,又称向量.具有方便检索的特点.以下,是笔者学习是基于C++实现的顺序表代码,贴上来当网页笔记用. #include <iostream> usi ...

  9. CSS3 transform的demo1

    <!DOCTYPE html> <html> <head> <title>弹出层演示</title> <meta charset=&q ...

  10. ejabberd模块开发

    参考: http://anders.conbere.org/journal/ http://www.process-one.net/en/wiki/ejabberd_module_developmen ...