fixed:固定定位

absolute:绝对定位

区别很简单:

1、没有滚动条的情况下没有差异

2、在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动

常用场合:

1.fixed常用于网站边缘的公司联系方式和快速回到顶部

2.absolute常用于页面

、、、、、、、、、、、、、、、、、、、、、、、

我们知道,css的position定位属性中,表示绝对定位的有两个值,值absolute与值fixed。

都是绝对定位,二者有一致性,也有不同点。那么二者的区别是什么呢?那就是position的fixed值定位的元素会固定在原来的位置不变,不管你如何拖动滚动条,元素都不会改变位置,这从fixed这个英文单词的意思也可以看出,“固定的,不变的,固执的”。而absolute正好相反,拖动滚动条时元素会随着改变位置。

css的position中absolute和fixed的区别的更多相关文章

  1. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

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

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

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

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

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

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

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

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

  6. css中的position 的absolute和relative的区别(转)

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

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

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

  8. position的absolute与fixed共同点与不同点

    这个问题面试被问到过~~ A:共同点: 1.改变行内元素的呈现方式,display被置为block: 2.让元素脱离普通流,不占据空间: 3.默认会覆盖到非定位元素上   B不同点: absolute ...

  9. position定位-absolute与fixed

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

随机推荐

  1. 【状压dp】Trie 树 @中山纪念中学20170304

    目录 Trie 树 PROBLEM 题目描述 输入 输出 样例输入 样例输出 SOLUTION CODE Trie 树 PROBLEM 题目描述 字母(Trie)树是一个表示一个字符串集合中所有字符串 ...

  2. python之数据类型与变量

    第一:变量 变量作用:保存状态:说白了,程序运行的状态就是状态的变化,变量是用来保存状态的,变量值的不断变化就产生了运行程序的最终输出结果 一:声明变量 # -*-coding:utf-8-*- na ...

  3. flask之分页插件的使用、添加后保留原url搜索条件、单例模式

    本篇导航: flask实现分页 添加后保留原url搜索条件 单例模式 一.flask实现分页 1.django项目中写过的分页组件 from urllib.parse import urlencode ...

  4. IPAddress.Any 解决本地ip和服务器ip切换问题

    IPAddress.Any表示本机ip,换言之,如果服务器绑定此地址,则表示侦听本机所有ip对应的那个端口(本机可能有多个ip或只有一个ip)IPAddress.Any微软给出的解释是:Provide ...

  5. Coursera机器学习+deeplearning.ai+斯坦福CS231n

    日志 20170410 Coursera机器学习 2017.11.28 update deeplearning 台大的机器学习课程:台湾大学林轩田和李宏毅机器学习课程 Coursera机器学习 Wee ...

  6. eclipse项目名称后面括号里的名称和项目名称不一样

    解决方案: 1:项目右键-属性(Properties)-Web Project Setting, 改名称注意:这个名字将成为你在浏览器访问的路径 2:打开项目目录的.setting文件夹,随便一个文本 ...

  7. 使用Azure的GPU系列虚拟机Ubuntu-16.0.4安装GPU驱动并使用Tensorflow-GPU的过程。

    1.source activate python362.source activate tensorflow-gpu3.pip install tensorflow-gpu(提示安装的这个版本:ten ...

  8. 每天一个linux命令:top

    1.命令简介 top (top) 令经常用来实时监控linux的系统状况,比如cpu.内存的使用,类似于Windows的任务管理器. 2.用法 top -hv | -abcHimMsS -d dela ...

  9. java 线程间的通信 (wait / notify / notifyAll)

    package waitnotifytest; import java.util.Collections; import java.util.List; import com.google.commo ...

  10. [转]rsync命令中文文档

    原文链接 rsync是一个快速.多功能的远程(和本地)文件拷贝工具. 摘要 Local: rsync [OPTION...] SRC... [DEST] Access via remote shell ...