CSS中"position:relative"属性与文档流的关系
前言
近期遇到一个问题——"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据。最后我自己佐证了一番,总算有了个结果:"position:relative"不会导致元素脱离文档流。
博文地址:CSS中"position:relative"属性与文档流的确切关系
"relative"与文档流
说到标准,最权威的自然莫过于CSS标准文档。经过一番繁琐的查找之后(w3c网站找东西是真的累。。。),终于被我找到了。文档中"positioning-scheme"一节写道:
链接:https://www.w3.org/TR/CSS22/v...
An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow.
当元素是浮动,绝对定位或者根元素时,元素被称为"流外元素",否则被称为"流内元素"。
很明显,"position:relative"的元素仍在文档流中。
另外,推荐下一个人认为不错的文章:
html/css基础篇——DOM中关于脱离文档流的几种情况分析
CSS中"position:relative"属性与文档流的关系的更多相关文章
- css布局与文档流的关系之float(浮动)
所谓文档流,指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列.脱离文档流呢,就是元素打乱了这个排列,或是从排版中拿走. 说到文档流呢,我们先来说一下元素,每个元素呢,都有display ...
- css中position:relative的真正理解
其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...
- 深究CSS中Position的属性和特性
一.position的概念 作为布局必不可缺少的元素之一,深究其属性以及一些注意点是非常必要的. 定义:规定元素的定位类型. position属性: 属性 描述 常用性 absolute 生成绝对定位 ...
- CSS层叠的问题、标准文档流、伪类选择器
一.层叠的问题 CSS有两个性质: 1.继承性 2.层叠性:选择器的一种选择能力,谁的权重大就选谁 层叠性又分为: 1).选不中:走继承性 (font.color.text.) 继承性的权重是0 若 ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
- 【CSS】position relative 用法
Relative是position的一个属性,是相对定位. position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:stat ...
- 子元素position:absolute定位之后脱离文档流,怎么使子元素撑开父元素
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DO ...
- HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法
块级元素div分析 1.外边距 margin 2.内边距 padding 3.边框 border Div的真实宽度=width+margin-left+margin-right+border*2+ ...
- float,absolute脱离文档流的总结
dom元素脱离文档流,有如下几种方式: 1. float 脱离文档流,其他dom元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局.父元素会无视他,因此无法获取其高度 ...
随机推荐
- 远程关机 (Windows shutdown Windows)
在某些场景,可使用远程关机控制整个局域网中的所有电脑进行一键关机或重启,便于管理,以提高工作效率. 从远程系统强制关机,首先需要进行一些必要的设置. 1.使用 win + R 打开运行,输入gpedi ...
- Django数据迁移时提示 ModuleNotFoundError: No module named 'users'
执行数据迁移时提示找不到对应的APP,错误如下: 这个错误主要是路径找不到引起的,只需在settings文件夹中添加app文件路径即可 sys.path.insert(0, os.path.join( ...
- Introduction to Differential Equations,Michael E.Taylor,Page 3,4 注记
此文是对 [Introduction to Differential Equations,Michael E.Taylor] 第3页的一个注记.在该页中,作者给了微分方程$$\frac{dx}{dt} ...
- idea 创建项目没有web.xml文件,如何添加
1.首先看下项目工程里面是否有WEB-INF文件夹,没有就创建一个 2.点击 file 选择 project structure 3.选择 facets,点击+号, 选择 web 4.弹出 弹框 选择 ...
- CLOUD信用管理设置
1.参数设置(管理员账户) 2.客户管理-信用管理设置 3.信用检查规则设置 4.信用档案设置 5.涉及集团公司,母公司与子公司的设置 6.信用档案-对象类型可为客户及集团客户 7.信用特批权限设置 ...
- python数据类型:元组
python数据类型:元组 python的元组与列表类似,但是元组的元素不能修改 元组使用小括号,列表使用大括号 元组创建简单,只需要在括号中添加元素,使用逗号隔开 创建元组: tup1 = (50, ...
- 如何使用Outlook 客户端配置其他邮箱客户端收发邮件
本文介绍Outlook2016客户端配置QQ邮箱收发邮件 1.打开Outlook客户端,文件->信息->-添加账户 2.输入需要添加的邮箱账户,点击连接 3.输入密码并连接 4.打开QQ邮 ...
- Markdown 语法手册
1. 斜体和粗体 使用 和 * 表示斜体和粗体. 示例: 这是 斜体,这是 粗体. 2. 分级标题 使用 === 表示一级标题,使用 - 表示二级标题. 示例: 1234567 这是一个一级标题=== ...
- java170道面试题汇总+详细解析
2013年年底的时候,我看到了网上流传的一个叫做<Java面试题大全>的东西,认真的阅读了以后发现里面的很多题目是重复且没有价值的题目,还有不少的参考答案也是错误的,于是我花了半个月时间对 ...
- 转载——Python Selenium 常用方法总结
selenium Python 总结一些工作中可能会经常使用到的API. 1.获取当前页面的Url 方法:current_url 实例:driver.current_url 2.获取元素坐标 方法:l ...