【css进阶】从css的position开始

1.css的几种position

我们知道css的position有以下几种值
- absolute
- relative
- fixed
- static

absolute:绝对定位。可以使用left，right，top，bottom定位。对象脱离常规流，偏移参照离自身最近的已定位祖先元素，如果没有定位的父元素，则一直回溯到html。偏移之后，会产生塌陷，并且在文档流中不占有位置。

relative：相对定位。可以使用left，right，top，bottom定位。对象不脱离文档流，偏移参照离自身最近的祖先元素。偏移后，原先在文档流中的位置还会保留。

fixed：绝对定位。可以使用left，right，top，bottom定位。对象脱离文档流，相对于浏览器窗口定位。当出现滚动条的时候，对象不会发生滚动。

static：未定位。正常文档流，不可以使用left，top，right，bottom定位。

另外css3还增加了3个新的属性

• center
• page
• stricky

center：与absolute一致，但是偏移位置相对于已定位祖先元素的中心点。盒子在包含框内水平垂直居中。

page：元素的包含快永远是初始包含块。

stricky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

然后，我想说，目前，新增的几个position属性没有什么兼容性。所以还不能用。

2.containing block

css核心 包含块

CSS魔法堂：不得不说的Containing Block

看完之后，明白了

3.BFC和IFC

CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

4.position，float，display叠加

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

今天看完一遍大大们的总结，又是IFC又是CB的还是有些懵。今天消化消化，明天再来整理一下。