文档流的概念、定位的理解

文档流的概念：CSS元素要么in normal flow, 要么out of normal flow。Normal flow就是盒子flow down the page，默认的static position; out of normal flow包括position absolute/position relative/position fixed/float。

不同的定位有什么区别呢？主要有3个方面：position后面的元素如何反应？position后宽度如何变化？相对于谁定位？

1、设置了position后面的元素如何反应? absolute 和 fixed ,会ignore the positioned element，上移。relative,会留下他本来有的空间。也就是说absolute/fixed会脱离标准文档流，而relative还在标准文档流。

2、positioned element是否shrink wrap? absolute和 fixed, 他们会wrap来自适应内容, 如果是行内元素会变成块，可以设置width和height。relative, 保留以前的block/inline/inline-block属性。

3、相对于谁position? relative相对这个元素原始的位置；absolute相对设置了position属性的parent element/viweport；fixed相对viewport。（By default, elements with absolute positioning have auto height and widths.）

设置了relative/absolute/fixed的元素，拥有z-index属性。可以是正，可以是负，正的在stack order里处于比较高的位置。

转载于:https://www.cnblogs.com/guojunru/p/5370216.html