文档流的概念: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里处于比较高的位置。