CSS——定位（position）

一、定位的简介

    1、定位（position）：是一种更高级的布局手段。通过定位可以将元素摆放到任意位置

    2、偏移量（affest）：当元素开启了定位以后，可以通过偏移量来设置元素的位置。

① top ：定位元素和定位位置上边的距离

② bottom：定位元素和定位位置下边的距离

定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下我们只会使用其中一种。

top值越大，定位元素越向下移动；bottom值越大，定位元素越向上移动。

③ left：定位元素和定位位置左侧的距离

④ right：定位元素和定位位置右侧的距离

定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用一个。

left越大元素越靠右；right越大元素越靠左。

    3、使用position属性来设置定位

         可选值：static   默认值，元素是静止的没有开启定位

                       relative  开启元素的相对定位

                       absolute  开启元素的绝对定位

                       fixed   开启元素的固定定位

                       sticky   开启元素的粘滞定位

（1）相对定位：当元素的position属性值设置为relative时则开启了元素的相对定位。

                          特点：① 元素开启了相对定位以后，如果不设置偏移量，元素不会发生任何改变

                                     ② 相对定位是参照于元素在文档流中的位置进行定位的

                                     ③ 会提升元素的层级

                                     ④ 不会使元素脱离文档流

                                     ⑤ 不会改变元素的性质（块元素还是块元素，行内元素还是行内元素）

（2）绝对定位：当元素的position属性值设置为absolute时，则开启了元素的绝对定位。

                           特点：① 开启绝对定位之后，如果不设置偏移量，元素的位置不会发生变化

                                      ② 开启绝对定位后，元素会从文档流中脱离

                                      ③ 绝对定位会改变元素的性质，行内元素变成块元素，块元素的宽高会被内容撑开

                                      ④ 会使元素提升一个层级

                                      ⑤ 绝对定位元素是相对于其包含块元素进行定位的

 包含块（containing block）：正常情况下，包含块就是离当前元素最近的祖先块元素。

  例如：<div><div></div></div>，中间的div包含块就是外边的div

            <div><span><em>hello</em></span></div>，em的包含块就是最外边的div

         绝对定位的包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则相对于根元素定位。例如：html即为根元素，也叫初始包含块。

 4、绝对定位元素的布局

（1）水平布局：

         left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容宽度

① 当我们开启了绝对定位后，水平方向的布局就需要添加left和right两个值，此时规则和之前一样：

                当发生过度约束：  如果9个值中没有auto则自动调整right的值以使等式成立

                                              如果有auto，则自动调整auto的值以使等式满足

    可设置auto的值：margin、width、left、right

注意：因为left和right的值默认是auto，所以如果不指定left和right的值时则等式不满足时，会自动调整这两个值。

（2）垂直布局：  需满足等式：

        top + margin-top/bottom + padding-top/bottom + border-top/bottom + height + bottom = 包含块的高度

5、元素的层级

① 对于开启了定位的元素，可以通过 z-index 属性来指定元素的层级。

② z-index 需要一个整数作为参数，值越大元素的层级就越高，元素的层级越高就越优先显示。

③ 如果层级一样，则优先显示靠下的元素。

④ 祖先元素的层级再高，也不会盖住后代元素。

本文分享到此结束，关于定位的学习远远不止这些，欢迎大家一同讨论学习，下一节跟大家分享CSS的字体和背景的一些知识。