相对定位与绝对定位

一、相对定位

相对定位的概念：  position属性的值为relative

                    1. 如果设置了相对定位，没有改变偏移量，则元素不会移动

                    2. 相对的位置是元素所在文档流的位置。

                    3. 设置了相对定位的元素，不会脱离文档流

                    4. 设置了相对定位的元素提高了自己的层级

                    5. 设置了相对定位的元素，本身的性质不会改变， 块依旧是块元素，行内依旧是行内元素

       

            偏移量：

                  top:   数值是正值，表示向下移动

                  bottom: 数值是正值，表示向上移动   一般情况下top和bottom选择一个即可  

                  left:  数值是正值，表示向右移动

                  right: 数值是正值，表示向左移动     一般情况下left和right选择一个即可  

二绝对定位

绝对定位： 当属性position的值为absolute时，就开启的绝对定位

                    1. 如果设置了绝对定位，不改变偏移量，则该元素不会移动

                    2. 设置了绝对定位的元素会脱离文档流，如果下面的兄弟没有设置浮动或者定位则向上移动

                    3. 设置了绝对定位的元素的位置是相对于所在的包含块。

                    4. 设置了绝对定位的元素的性质会发生改变。 行内元素变成块元素， 此时所有的元素宽和高默认都是内容撑开的。

                    5. 设置了绝对定位的元素提高了层级。

            包含块：

                    如果设置了绝对定位，那么该元素是相对于距离他最近的设置了相对定位的祖先块元素。

                    如果所有的祖先块元素都没有设置定位，那么就是相对html这个根元素来说的。

                    建议：包含块尽量设置相对定位，因为相对定位不会脱离文档流。

                    简而言之：最近的设置了相对定位的祖先块称之为包含块。

                    HTML：是所有元素的初始包含块。