BFC引发的关于position的思考
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
其中第4条：BFC的区域不会与float box重叠
<style type="text/css">
.first{
width:100px;
height:100px;
background-color:red;
float:left;
}
.second{
width:200px;
height:200px;
background-color:blue;
overflow: hidden;
/*position:absolute;*/ }
</style>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
按照上述的写法，两个div确实没有发生重叠，并且按照预期的那样水平排放。
<style type="text/css">
.first{
width:100px;
height:100px;
background-color:red;
float:left;
}
.second{
width:200px;
height:200px;
background-color:blue;
/*overflow: hidden;*/
position:absolute; }
</style>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
随后，将second中生成BFC的元素overflow:hidden改为position:absolute;.这时候将，看到second将first覆盖了
。
看来，绝对定位还有点奇怪。
随后，于是我给蓝色块中添加一个小块，并给出绝对定位。
代码如下：
<style type="text/css">
.first{
width:100px;
height:100px;
background-color:red;
/*float:left;*/
}
.second{
width:200px;
height:200px;
background-color:blue;
/*overflow: hidden;*/
/*position:absolute;*/ }
.second-1{
width:100px;
height:100px;
background:green;
}
</style>
<body>
<div class="first"></div>
<div class="second">
<div class="second-1"></div>
</div>
</body>
而从样式可以发现
绿色的小DIV并没有定位到想象中的页面左上角去，而是停留在他原来的位置。
这时候只要给绿色的小DIV的样式添加一个top:0;left:0;才会跑到页面左上角去。
这说明，只给出position:absolute;只让该元素脱离了普通文档流，而并没有改变他的位置
结论：给定一个元素position:absolute;而不给出top与left值，它就会去先找父元素并定位，随后，给出top与left值之后所呈现的位置才是定义的样式。
个人理解，如有不足，还请指教
BFC引发的关于position的思考的更多相关文章
- 由异常：Repeated column in mapping for entity/should be mapped with insert="false" update="false 引发对jpa关联的思考
由异常:Repeated column in mapping for entity/should be mapped with insert="false" update=&quo ...
- try catch引发的性能优化深度思考
关键代码拆解成如下图所示(无关部分已省略): 起初我认为可能是这个 getRowDataItemNumberFormat 函数里面某些方法执行太慢,从 formatData.replace 到 une ...
- Topk引发的一些简单的思考
软件工程课程的一个题目:写一个程序,分析一个文本文件中各个词出现的频率,并且把频率最高的10个词打印出来.文本文件大约是30KB~300KB大小. 首先说一下这边的具体的实现都是在linux上实现的. ...
- 一个神秘现象引发对beego框架的思考
小强最近在项目中遇到了一个很奇怪的问题:在整改日志规范时,为了避免影响现有的代码结构以及改动尽可能小的前提下,在调用记日志的SDK处将某一个字段值首字母改为大写,代码示例如下: fmt.Println ...
- 由mv命令引发的对inode的思考
一场机器迁移引起的思考 最近团队一台机器老化了,准备做全量迁移,一不小心,就把100多个G的/data目录放到了新机器的/data/data目录下,上愁了,怎么削减一层data目录呢?难倒像Windo ...
- 由Menu小项目所引发的对软件工程的思考
学习了孟老师的这几节课程,我学习了如何搭建一个简单的命令行menu小程序,从最简单的程序开始,一步步的根据软件工程的一般规律,进行逐步开发.完善,最终实现了一个比较通用的menu程序,可以让别的开发者 ...
- 由”二进制里不能有3“引发的对parseInt的思考
看到一道面试题,["1", "2", "3"].map(parseInt) 答案是多少? 心生好奇,做做看,发现卡住,没什么头绪.首先对pa ...
- 由Vue引发的getter和setter思考
公司的新项目决定使用Vue.js来做,当我打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情: 它的每个属性都有两个相对应的get和set方法,我觉的这是多此一举的,于是去网上查了查Vu ...
- setTimeout(fn, 0)引发的JavaScipt线程的思考
起因 周五改一个checkbox的display属性被错误地设置为none的bug. 经debug发现, 有两个地方修改了display属性: 1) checkbox的controller; 2) c ...
随机推荐
- angularjs 中ie兼容性的问题收集
今天在项目中做ie8的兼容的时候,发现angularjs中一些内容这样写有问题,那样写就没有问题了,自己记录一下内容: 如果遇到了ie8中使用$http.post请求不到数据的时候,以下的方法是获取不 ...
- Java自定义Annotation,通过反射解析Annotation
创建一个自定义的Annotation import java.lang.annotation.*; import java.lang.reflect.Method; @Documented @Targ ...
- keil中的存储模式
存储模式 存储模式决定了默认的存储器类型此存储器类型将应用于函数参数局部变量和定义时未包含存储器类型的变量你可以在命令行用SMALL COMPACT和LARGE参数定义存储模式,定义变量时使用存储器类 ...
- uCos 没有延时Tick滴答定时器测试
原来学uCos只是表面,今天才发现uCos没有心跳也是可以活的,只是延时功能. 即:OSTimeDly.OSTimexxx 头的功能不能使用. 如果有是用OSTimexxx,任务将会卡死.其实,OST ...
- ECSHOP在线手册布局参考图--积分商城 exchange_list.dwt
A.购物车 1,设置方法 程序自动读取购物车的商品数量 2,代码相关 cart.lbi 中 {insert_scripts files='transport.js'} <div clas ...
- Android设计模式系列--工厂方法模式
工厂方法模式,往往是设计模式初学者入门的模式,的确,有人称之为最为典型最具启发效果的模式.android中用到了太多的工厂类,其中有用工厂方法模式的,当然也有很多工厂并不是使用工厂方法模式的,只是工具 ...
- ant中调用外部ant任务的两种方法
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 对PostgreSQL xmin的深入学习
当PostgreSQL需要insert 一条记录的时候,它会把记录头放入xmin,xmax等字段. xmin的值,就是当前的Transaction的TransactionId.这是为了满足MVCC的需 ...
- Swift入坑--block的定义
typealias methodCompletionBlock = (String)->Void
- HTML5----CSS显示半个字符
CSS显示半个字符的基本思路: 就是一个字写两遍,分别显示一半.这里就须要用到CSS伪元素:before和:after,记住这个"伪元素"的"伪"字,表明它本来 ...