前言
近期遇到一个问题——"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元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局.父元素会无视他,因此无法获取其高度 ...
随机推荐
-
AngularJS XMLHttpRequest $http服务
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 读取JSON文件 以下是存储在web服务器上的 JSON 文件: http://www.runoob.com/try/ ...
-
UOJ35 后缀数组(模板)
#35. 后缀排序 这是一道模板题. 读入一个长度为 nn 的由小写英文字母组成的字符串,请把这个字符串的所有非空后缀按字典序从小到大排序,然后按顺序输出后缀的第一个字符在原串中的位置.位置编号为 1 ...
-
使用struts2+hibernate的增、删、改、查构架简单的学生管理系统
工程环境:MyEclipse8.5 其他配置:Hibernate框架+jtds链接数据库驱动+Sql2008数据库+MyEclipse serevr+JDK1.7 开发环境:Win7x64 这个项目用 ...
-
三大框架常遇的错误:hibernate : object references an unsaved transient instance
hibernate : object references an unsaved transient instance 该错误是操作顺序的问题,比如: save或update顺序问题---比方学生表和 ...
-
Coursera Machine Leaning 课程总结
最近机器学习比较火热,身边很多同学都有兴趣,恰好Coursera上面有这门课.讲授这门课的Andrew教授任职斯坦福大学,是coursera的联合创建者,在机器学习领域颇有成就,身边的同学也有几位上这 ...
-
jquery评分插件jquery.raty.js
1.参考链接 官方地址. 教程一 教程二 2.案例1 引入文件: <!-- 评分插件 --> <script type="text/javascript" src ...
-
Unity编辑器下,界面替换NGUI字体以及字号
项目中有需要批量替换字体以及字号的需求,一般也就是多语言处理吧. 提供界面如下: 手机拍图,就这样凑合看吧.但是代码不打折. 紧急避让,我只提供修改UILabel以及UIPopupList 下的字体, ...
-
libxml2实例
// libxmlTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <stdio.h> #includ ...
-
grafana里prometheus查询语法
名称 描述 label_values(label) 返回label每个指标中的标签值列表. label_values(metric, label) 返回label指定度量标准中的标签值列表. metr ...
-
C# 取得内网IP、外网IP、客户端IP方法
前言 在 Windows Form Application 里对于取得 IP Address 有内网.外网两种 IP Address ,如果只需要取得内网 IP Address ,可以透过使用 IPH ...