【对比分析四】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 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...
随机推荐
- k8s学习笔记之九: Service Account
第一章.前言 每一个用户对API资源进行操作都需要通经过以下三个步骤: 第一步:对客户端访问进行认证操作,确认是否具有访问k8s权限 token(共享秘钥) SSL(双向SSL认证) ....通过任何 ...
- Python + Robot Framework 环境搭建
一.Python 安装 说明:由于RIDE是基于python2.x开发,后期未做python3.x兼容,所以这里安装python2.7. 链接: https://pan.baidu.com/s/1yf ...
- SpringBoot 出现Whitelabel Error Page 解决办法
这是咋了,咋的就404了 我路径也挺对的啊 注解也都写上了啊 咋就找不到了呢? debug吧它不进方法 看日志吧,他还不报错 这家伙给我急的 百度一下午也没解决,最后还是看官网才知道错在了那里,程序只 ...
- python 数据分析库介绍
1 引言 高效处理数据的python工具: 与外界进行交互: 读写各种文件格式和数据库 准备: 对数据进行清理.修整.整合.规范化.重塑.切片切换.变形等处理以便进行分析 转换: 对数据集做一些数学和 ...
- windows下Mysql8.0.12安装详解
MySQL的安装过程还是比较繁琐,为了以后安装节约时间,将其详细安装过程总结如下: 1>下载对应版本 下载地址:https://dev.mysql.com/downloads/mysql/ 2& ...
- 我尼玛,二半夜的说中photo.src病毒了。
大半夜手机预警,中病毒了,我感觉也没啥东西呀.一个破小网站,别人黑我干啥. 登上服务器去一看,我滴个乖乖,photo.src病毒.服务器里面显示是一个背景桌面应用程序, 打算直接从文件夹删除,但是正在 ...
- PC滚动条样式
#jmwin2为外部容器 #jmwin2{ width: 90%; height: 65%; background: white; position: abso ...
- 考研结束,重返python
因为考研的原因,python的学习告一段落,现在考验终于结束了,也抓眼又到了新的一年.新的一年里也要继续加油啊.python学习之路还要继续下去,但是毕竟有将近半年没有鹏编程了,首先我还是需要好好的复 ...
- dump、load和dumps、loads的区别
dump: 将dict(字典)转换为str(字符串),并写入json文件中. load: 用于从json文件中读取数据 运行结果: dumps: 将dict(字典)转换为str(字符串). 运行结果: ...
- 652. Find Duplicate Subtrees找出重复的子树
[抄题]: 就是出现了多次的子树,可以只包括一个点. Given a binary tree, return all duplicate subtrees. For each kind of dupl ...