利用维度知识理解CSS中的定位属性

Posted 2022-03-13 michaelcat

我们知道html中有常规流文本和非常规流，当一个元素的position属性为为相对定位、绝对定位或固定定位时，这个元素就会脱离的常规流文本，这个时候就可以利用left等属性来进行位置的设定。

要理解这个过程的原理其实很简单，我们可以利用维度思维来理解。

我们都知道二维维度是一个平面维度，三维维度就是我们现在所处的现实世界，那么我们就可以把一个页面看作是一个二维的平面维度，这个维度里的内容是有排列顺序的，比如你在写一篇文章，突然发现某一句话需要放到它前面那一段话的前面，那么你就需要把这个句子删掉，交换顺序后，再写一次，HTML中也是一样，但是当我们给这个元素设置了定位属性，让它脱离了常规流之后，这个时候这个元素就相当于是跳出了二维的平面维度世界，来到了三维的立体世界，自然这个元素就可以在二维这个平面维度世界上随意的移动，而不需要去重新书写代码。而基于此的层叠关系同样可以用这个方式理解，比如，一支笔我们可以把它放在一张纸的上面，即这支笔的层级比这张纸的层级要高，那么我们从上到下首先看到的就是这支笔，当我们把这支笔放在这张纸的下面时，即这支笔的层级比这张纸的层级要低，那么我们从上到下首先看到的就是这张纸，而不再是笔了。