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

文档流的概念:CSS元素要么in normal flow, 要么out of normal flowNormal 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还在标准文档流。

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

3、相对于谁position? relative相对这个元素原始的位置;absolute相对设置了position属性的parent element/viweportfixed相对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