CSS-定位

一、为什么要使用定位：有一些覆盖在固定盒子上的特殊盒子，通过标准流和浮动很难实现

1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子

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

二、 定位组成:

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式。边偏移 则3.2.2：决定了该元素的最终位置。

边偏移 :就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

三、定位模式：

3.1：静态定位(static) ：静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用

 语法：
 .box1{
            position: static;
        }

3.2:相对定位(relative),相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的,

相对于原来的位置,不脱离标准文档流

语法：
 .box1{
            position: relative;
}

3.3:绝对定位(absolute), 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的,

脱离标准文档流,  不保留原本的位置

语法：
 .box1{
            position: absolute;
}

                3.3.1:父元素没有定位，则以浏览器为准定位

                3.3.2：父元素有定位，元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位

3.4：固定定位(fixed) ：在浏览器页面滚动时元素的位置不会改变

语法：
 .box1{
            position: fixed;
}

        固定定位的特点：

                                        1.以浏览器的可视窗口为参照点移动元素

                                        2.跟父元素没有任何关系

                                        3.不随滚动条滚动

3.5： 粘性定位(sticky)，粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

语法：
 .box1{
            position: sticky;
}

3.6: 堆叠顺序（z-index）:在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序

z-index 的特性如下：

                        1.属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；

                        2.如果属性值相同，则按照书写顺序，后来居上

                        3.数字后面不能加单位

                         注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效