CSS中的定位：position

1. 定位可以让盒子自有的在某个盒子内移动位置，或者固定在屏幕中的某个位置，并且可以压住其他盒子。

例如：淘宝网的顶部和右侧的导航栏，就是需要固定在屏幕上的某个位置。

2. 定位的组成

定位 = 定位模式 + 边偏移

定位模式：用于指定一个元素在文档中的定位方式。

边偏移：决定了该元素的最终位置。

        2.1 定位模式：通过position属性来设置，分为static、relative、absolute、fixed 4个属性：

     

        2.2 边偏移：定位盒子移动到最终位置。分为top、left、bottom、right 4个属性。

     

3. 定位的四种属性详解

        3.1 static（静态定位）：是元素的默认定位方式，无定位的意思。

                特点：· 静态定位是按照标准流的特性摆放位置，它没有边偏移。

                           · 在布局时很少用到。

        3.2 relative（相对定位）：在移动位置时，是相对于它原来的位置来说的。

                特点：· 它移动时的参照点是自己原来的位置；

                           · 不脱离文档流，继续保留原来的位置。（最典型的应用：限制绝对定位）

                例：

     

​

        3.3 absolute（绝对定位）：在移动位置时，是相对于祖先元素来说的。

                特点：· 如果没有祖先元素，或者祖先元素没有定位，则以浏览器为准进行定位。

                           · 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置。

                           · 绝对定位不再占有原先的位置（脱离文档流）

                例：

​​​​​​

       

                绝对定位脱离文档流

       

              

        3.4 fixed（固定定位）：元素固定于浏览器可视区的位置。

                主要使用场景：可以在浏览器页面滚动式，元素的位置不会改变。

                特点：· 以浏览器的可视窗口为参照点移动元素。

                                   · 跟父元素没有关系

                                   · 不随滚动条滚动

                            · 固定定位不占有原先的位置（脱离文档流）

                 例：

                     

4. 父相子绝的由来

        这句话的意思是：子级使用绝对定位，父级则需要相对定位

        原因：

                1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个位置，不会影响其他的兄弟盒子。

                2. 父盒子需要加定位显示子盒子在父盒子内显示。

                3.父盒子布局时，需要占有位置，因此父盒子只能是相对定位。

        总结：因为父级需要占有位置，因此是相对定位；子盒子不需要占有位置，则是绝对定位。