本篇主要讲解CSS中的position.在本篇中主要讲position的五个。1、static-自然模型。2、relative-相对定位模型。3、absolute-绝对定位模型。4、fixed-固定定位模型。5、sticky-磁贴定位模型。从字面上看，position是定位，在我们CSS中，position是一个非常重要的属性。
首先先要讲一个小知识，document tree，那么什么是document tree呢，我们看下面的这幅图就明白了。
document true
在上图中，我们可以看出来 其实右边的div和下面的p 以及 ul就是父子关系，其中p和ul是div的子元素。同理 ul是下面三个li的父元素。
接下来讲讲containing-block，首先我们要知道我们的position定位都是需要去做一个x和y的偏移，那么这个偏移需要一个参照物，参考的一个区域。
先来讲讲position中的第一个值static。他也是叫做静态定位/常规定位/自然定位。它的作用是使元素定位于常规/自然流中。（块、行垂直排列下去，行内水平从左到右），它的特点有3个。（1）忽略top bottom left right或者z-index声明。 （2）两个相邻的元素如果都设置了外边距，那么它的最终边距等于两者外边距中的最大值。（3）具有固定width和height的值的元素，如果左右外边距都设置为auto，则左右外边距会自动扩大占满剩余宽度，造成的的效果就是这个块水平居中。
网友评论