这个问题面试被问到过~~
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. win2008阿里一键环境包mysql老是1067报错

    目前查看并不是染毒导致mysql无法启动,而是在mysql的配置文件中配置了log这个参数,这个参数语义不明确,请您将“--log”更改为general_log_file并添加一行“general_l ...

  2. c语言正则表达式

    标准的C和C++都不支持正则表达式,但有一些函数库可以辅助C/C++程序员完成这一功能,其中最著名的当数Philip Hazel的Perl-Compatible Regular Expression库 ...

  3. (转)eclipse自动补全的设置

    如果你用过Visual Studio的自动补全功能后,再来用eclipse的自动补全功能,相信大家会有些许失望. 但是eclipse其实是非常强大的,eclipse的自动补全没有VS那么好是因为ecl ...

  4. 可靠通信的保障 —— 使用ACK机制发送自定义信息——ESFramework 通信框架4.0 快速上手(12)

    使用ESPlus.Application.CustomizeInfo.Passive.ICustomizeInfoOutter接口的Send方法,我们已经可以给服务端或其它在线客户端发送自定义信息了, ...

  5. [转]整理jquery使用好习惯

    1.选择器Selector的使用 1)使用id定位性能最好   1.$("#id") 2)使用标签名定位,性能其次   1.$("p"),$("div ...

  6. DigitalOcean VPS简介

    DigitalOcean是一家位于美国的云主机服务商,总部位于美国纽约,成立于2012年.由于价格低廉,高性能配置.灵活布置的优势,近些年来发展迅猛,成为中国站长圈们喜爱的品牌.(访问http://w ...

  7. System 和 Runtime 类

    package day13; import java.util.Arrays; import java.util.Properties; public class Demo1 { /* 讲解syste ...

  8. Chapter 15_2 编写模块的基本方法

    在Lua中创建一个模块最简单的方法是:创建一个table. 并将所有需要导出的函数放入其中,最后返回这个table. 下例中的inv声明为程序块的局部变量,就是将其定义成一个私有的名称: local ...

  9. 转 shell awk 使用详解

    awk简介 awk: 中文意思是报告生成器 能够根据我们输入的信息,将信息格式化以后显示,将定义好的信息以比较美观(直观)的方式显示出来出现比较早,继而出现了new awk(nawk)在windows ...

  10. 单片机上使用TEA加密通信(转)

    源:单片机上使用TEA加密通信 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:MDK4.72 单片机:STM32 说 ...