【对比分析四】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 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...
随机推荐
- std::set
std::set 不重复key 默认less排序 代码 #include <iostream> #include <set> class Person { public: ...
- Vue 目录结构 绑定数据 绑定属性 循环渲染数据
一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...
- django之 使用views.py里面的函数对表进行增删改查 内容(models.py中表的创建、views.py中函数的使用,基于对象的跨表查询)
models之对于表的创建有以下几种: 一对一:ForeignKey("Author",unique=True), OneToOneField("Author" ...
- 定位JVM内存溢出问题思路总结
JVM的内存溢出问题,是个常见而有时候有非常难以定位的问题.定位内存溢出问题常见方法有很多,但是其实很多情况下可供你选择的有效手段非常有限.很多方法在一些实际场景下没有实用价值.这里总结下我的一些定位 ...
- (14)其他Linux命令
*****拷贝文件cp somefile.1 /home/hadoop/ 以原文件名进行拷贝 cp somefile.1 /home/hadoop/somefile.2 以新文件名进行 ...
- openwrt从18.0.1降级回到17.0.6遇到的问题
因为觉得openwrt的18的配置检查功能很费时,特别是遇到ar93xx慢的真可以,所以决定从18.0.1降回到17.0.6上 先把18.0.1的配置backup出来,然后刷17.0.6,再把back ...
- 将font-size设置为 12px 以下,Chrome浏览器只能显示12px怎么办?
将字体大小设置为12px以下,而Chrome浏览器依然只显示12px,因为 Chrome 这款任性的浏览器做了如下限制: 1. font-size 有一个最小值 12px(不同操作系统.不同语言可能限 ...
- install oracle 12c on redhat
---恢复内容开始--- 1. 确定VM的硬盘空间是否够 df- h, 硬盘空间free disk 15G 比较稳妥 2. 确定好网络,需要remote connect ifconfig 3. ...
- vs2010提取资源
setlocal enabledelayedexpansion rem cd C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\Bin set R ...
- 项目(四)DHCP服务配置
DHCP是由Internet工作任务小组设计开发的,专门用于为TCP/IP网络中的计算机自动分配TCP/IP参数的协议. 使用DHCP可以减少管理员的工作量,避免IP地址冲突,当网络修改IP地址网段时 ...