【对比分析四】position的absolute与fixed共同点与不同点
共同点:
(1) 改变行内元素的呈现方式,display被置为block;
(2) 让元素脱离普通流,不占据空间;
(3) 默认会覆盖到非定位元素上
不同点:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。
当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。
position :规定元素的定位类型。
任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
|
值 |
描述 |
|
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
|
static |
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
|
inherit |
规定应该从父元素继承 position 属性的值。 |
【对比分析四】position的absolute与fixed共同点与不同点的更多相关文章
- position的absolute与fixed共同点与不同点
这个问题面试被问到过~~ A:共同点: 1.改变行内元素的呈现方式,display被置为block: 2.让元素脱离普通流,不占据空间: 3.默认会覆盖到非定位元素上 B不同点: absolute ...
- position的absolute与fixed,absolute与relative共同点与不同点
absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...
- css position: relative | absolute | static | fixed详解
static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...
- css总结1:position定位:absolute/relative/fixed
1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...
- css position 属性 (absolute 和fixed 区别)
在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...
- css的position中absolute和fixed的区别
fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...
- position定位-absolute与fixed
1. absolute 生成绝对定位元素,相对于static定位以外的第一个父元素进行定位. 2. fixed 生成绝对定位元素,相对于浏览器窗口进行定位.
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?
position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...
随机推荐
- 转:StarUML3.0的破解方法
转自:https://blog.csdn.net/sam_shan/article/details/80585240 StarUML3.0的破解方法 最近StarUML由2.0更新到3.0.原来的破解 ...
- 性能测试day06_需求设计的学习(性能重中之重,思维方向永远重于工具)
今天接着来学习下性能知识,本来是应该先学习一下LR的用法的,不过听完云层大大的课之后,我感觉工具没有这一篇来的重要,我们知道性能有三大步骤:负载->监控->调优,但是在这个之前我们首先要搞 ...
- 这可能是目前最新的 Vue 相关开源项目库汇总(转)
访问地址:https://juejin.im/entry/58bf745fa22b9d0058895a58 原文链接:https://github.com/opendigg/awesome-githu ...
- linux环境下载和安装scala
Linux下安装Scala和Windows下安装类似,步骤如下: 1.首先访问下载链接:http://www.scala-lang.org/download/默认这里下载的是Windows版本,这时点 ...
- 三. html&JavaScript&ajax 部 分
1. 判 断 第 二 个 日 期 比 第 一 个 日 期 大 如何用脚本判断用户输入的的字符串是下面的时间格式2004-11-21必须要保证用户 的输入是此格式,并且是时间,比如说月份不大于12等等, ...
- kudu导入文件(基于impala)
kudu是cloudera开源的运行在hadoop平台上的列式存储系统,拥有Hadoop生态系统应用的常见技术特性,运行在一般的商用硬件上,支持水平扩展,高可用,集成impala后,支持标准sql语句 ...
- javascript权威指南第1章Js概述js语言核心
<html> <head> <script> function Point(x,y){ this.x=x; this.y=y; } ,); console.log( ...
- [Shell]Bash变量:数值运算及运算符
------------------------------------------------------------------------------------------------- Sh ...
- 【ESP8266】、ESP8266通讯使用的AT指令
一.AT指令介绍 AT(Attention), AT指令一般应用于终端设备和PC应用之间建立连接.通过AT指令来控制. 二.常用AT指令 AT指令主要分为: 基础AT指令,WIFI功能AT指令,TCP ...
- cdnbest独立主控用户如何开通日志分析
1.cdn独立主控用户开通日志分析,先用授权的帐号在官网平台登陆,然后购买日志套餐 2.在自已的主控平台还要做两步操作: 1.增加个日志套餐,内容随便,因为设置是无效的,只是需要一个套餐 2. 给用户 ...