前言

近期遇到一个问题——"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"属性与文档流的关系的更多相关文章

  1. css布局与文档流的关系之float(浮动)

    所谓文档流,指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列.脱离文档流呢,就是元素打乱了这个排列,或是从排版中拿走. 说到文档流呢,我们先来说一下元素,每个元素呢,都有display ...

  2. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  3. 深究CSS中Position的属性和特性

    一.position的概念 作为布局必不可缺少的元素之一,深究其属性以及一些注意点是非常必要的. 定义:规定元素的定位类型. position属性: 属性 描述 常用性 absolute 生成绝对定位 ...

  4. CSS层叠的问题、标准文档流、伪类选择器

    一.层叠的问题 CSS有两个性质: 1.继承性 2.层叠性:选择器的一种选择能力,谁的权重大就选谁 层叠性又分为: 1).选不中:走继承性  (font.color.text.) 继承性的权重是0 若 ...

  5. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  6. 【CSS】position relative 用法

    Relative是position的一个属性,是相对定位. position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:stat ...

  7. 子元素position:absolute定位之后脱离文档流,怎么使子元素撑开父元素

    纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DO ...

  8. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

  9. float,absolute脱离文档流的总结

    dom元素脱离文档流,有如下几种方式: 1. float 脱离文档流,其他dom元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局.父元素会无视他,因此无法获取其高度 ...

随机推荐

  1. MySql 按日期条件查询数据

    本周内: select * from wap_content where week(created_at) = week(now) 查询一天: select * from table where to ...

  2. C2. Power Transmission (Hard Edition)(线段相交)

    This problem is same as the previous one, but has larger constraints. It was a Sunday morning when t ...

  3. mysql之存储过程(一)

    今天开发一个需求,需要在一个旧表中增加一列并且对已经的表中记录初始化新列的值, 由于是一次性的工作,故写了个存储过程来代替代码程序初始化 创建及执行过程记录如下: MySQL [XXX_YYY]> ...

  4. orthologs|paralogs

    从这里我们可以举例说明,例如人的S100A8基因与猪的S100A8基因即为orthologs.人的a球蛋白和b球蛋白基因即为paralogs.需要补充的是,人的a球蛋白和鼠的b球蛋白基因也为paral ...

  5. Events|sample space|mutually exclusive events

    5.2Events The collection of all 52 cards—the possible outcomes—is called the sample space for this e ...

  6. 【SpringCloud】Eureka入门与原理

    为了开发效率高效和业务逻辑清晰,越来越多的项目采用分布式系统.分布式最重要的就是注册中心了.Eureka是SpringCloud原生提供的注册中心,来look一波吧. 超光速入门 服务端 引入依赖: ...

  7. bootstrap的button按钮点击之后会有蓝色边框怎么解决?

    .btn:focus,.btn:active:focus, .btn.active:focus,.btn.focus, .btn:active.focus,.btn.active.focus { ou ...

  8. python项目中对mysql数据库进行配置,并进行连接测试

    在settings.py中配置mysql数据库进行相关配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME ...

  9. life|October the 1st| five twenty|three–fifths|1970s|30s

    The music is full of  (a, an, the, /) life. It can release your pressure to a large extent, so I enj ...

  10. 吴裕雄--天生自然Android开发学习:android开发知识学习思维导图