相同点:

1、fixed定位和absolute定位都是绝对定位

2、fixed定位和absolute定位都脱离了标准文档流,

3、未设置偏移量时,都定位在父元素的左上角

tip:元素设置相对定位或绝对后,就具有了偏移属性和堆叠属性Z-index,属性值越大,越靠上

不同点:

fixed定位:

设置偏移量后:无论有无已经定位的祖先元素,都相对于浏览器窗口进行偏移

未设置偏移量:以其父元素为基准定位,会继续包含在父包含块中。

表现形式:位置固定,不会随滚动条变化;被他遮盖的元素,可以从其下穿过。

absolute定位:

设置偏移量时:无已定位的祖先元素,以<html>为基准偏移;有已经定位的祖先元素,以距离其最近的、已定位的祖先元素为基准偏移

表现形式:位置随滚动条变化

fixed定位与absolute定位的更多相关文章

  1. Relative 定位与Absolute 定位实例

    一直没有弄懂相对定位与绝对定位之间的关系,今天特来学习一下.本实践都是在360浏览器下测试所得. <!DOCTYPE html> <html> <head> < ...

  2. fixed 和 absolute 定位的区别

    fixed:固定定位           absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高 ...

  3. Css fixed和absolute定位差别

    fixed:固定定位 absolute:绝对定位 差别非常easy: 1.没有滚动栏的情况下没有差异 2.在有滚动栏的情况下.fixed定位不会随滚动栏移动而移动.而absolute则会随滚动栏移动 ...

  4. relative 和 absolute 定位关系

    问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative  相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...

  5. CSS 相对|绝对(relative/absolute)定位系列(一)

    一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...

  6. 在移动端H5开发中(关于安卓端position:fixed和position:absolute;和虚拟键盘冲突的问题,以及解决方案)

    一.在开发移动端webapp时,我们经常会遇到这样的问题,当我们需要在页面底部固定一个logo或者说明时,往往会采用position:fixed进行固定定位或者absolute定位到最底部 这是一个很 ...

  7. CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  8. 一篇文章搞定Selenium元素定位/封装/数据驱动

    小伙伴都知道,自动化最重的,又最"难"(因为实战中会碰到定位的各种坑)那就是定位元素.如果不熟练掌握定位,那只怕你比功能测式的小伙伴下班还会要晚!扎心了吧! Selenium常用定 ...

  9. 文件正在上传的转圈圈gif图片引出的fixed定位和absolute定位

     文件正在上传的转圈圈gif图片  一.文件上传时,未上传返回成功状态之前给个gif动态图片显示在页面,改善用户体验. <!--S 遮罩层 --> <div id="mas ...

随机推荐

  1. 使用bind实现主从DNS服务器数据同步

    一.bind简介 Linux中通常使用bind来实现DNS服务器的架设,bind软件由isc(www.isc.org)维护.在yum仓库中可以找到软件,配置好yum源,直接使用命令yum instal ...

  2. Qt Creator下载和安装(详细教程)

    简介 Qt是跨平台的图形开发库,目前由Digia全资子公司 Qt Company 独立运营,官方网址: http://www.qt.io/ 也可以访问Qt项目域名:http://qt-project. ...

  3. Hibernate写入Oracle Date类型处理

    Hibernate写入Oracle数据库时,数据库设计字段为Date类型时,只能保存年月日,不能保存时分秒,如果要保存时分秒,需修改Hibernate.cfg.xml文件 <property n ...

  4. transform 属性小解

    css中transform包括三种: 旋转rotate(), translate()移动, 缩放scale(), skew()扭曲以及矩形变换matrix() 语法: transform: none ...

  5. OpenGL ES着色器语言之变量和数据类型(一)(官方文档第四章)和varying,uniform,attribute修饰范围

    OpenGL ES着色器语言之变量和数据类型(一)(官方文档第四章)   所有变量和函数在使用前必须声明.变量和函数名是标识符. 没有默认类型,所有变量和函数声明必须包含一个声明类型以及可选的修饰符. ...

  6. debian 安装 android studio 环境

    jdk环境变量配置: ~/.hashrc export JAVA_HOME=/usr/share/jdk1.8.0_92 export PATH=$JAVA_HOME/bin:$PATH export ...

  7. World Finals 2003 UVA - 1025 A Spy in the Metro(动态规划)

    分析:时间是一个天然的序,这个题目中应该决策的只有时间和车站,使用dp[i][j]表示到达i时间,j车站在地上已经等待的最小时间,决策方式有三种,第一种:等待一秒钟转移到dp[i+1][j]的状态,代 ...

  8. Windows、Linux -- 远程登录、文件传输、文件共享

    Linux  <--->  Linux 远程登录: ssh服务 ssh root@10.20.62.124 文件传输: scp服务 上传  scp /home/xxx.txt root@1 ...

  9. [转]solr DataImportHandler 解决mysql 表导入内存溢出问题

    最近一个项目要用到solr做全文检索,开始盲人摸象. 用tomcat 7 开始配置,开始正常,但是遇到cookie里有中文就报错. 无奈,换tomcat 6, 结果DataImportHandler ...

  10. Python 数据挖掘 工具包整理

    连接器与io 数据库 类别 Python R MySQL mysql-connector-python(官方) RMySQL Oracle cx_Oracle ROracle MongoDB pymo ...