定位

浮动可以让多个块级元素的盒子在一行没有缝隙的排列显示，定位则可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分

边偏移

边偏移属性	描述
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
top	顶端偏移量，定义元素相对于其父元素上边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

ps：定位要与边偏移一起搭配使用，直接设置top和left属性是不会生效的。

定位模式

position属性用于定义元素的定位模式，其语法如下：

选择器 {
    position:  属性值;
}

属性值	描述
static	默认值，静态定位。
relative	相对定位，相对于自己在原本文档流的位置进行定位
absolute	绝对定位，相对于最近的有定位的父元素进行定位，如果所有的祖先元素都没有定位属性则相对于浏览器窗口进行定位
fixed	固定定位，不写偏移量属性相对于body固定定位（默认）写偏移量相对于浏览器窗口是固定位置

1.静态定位

静态定位是所有元素的默认定位方式就是各个元素在HTML文档流中默认的位置，当position属性的取值为static时，无定位的意思。

在静态定位状态下，无法通过偏移属性（top、bottom、left、right）来改变元素的位置。一般用来清除定位，比如一个原来有定位的盒子，不写定位了，就可以加static

2.相对定位relative

设置为相对定位的元素框会偏移某个距离，是相对于它原来在文档流中的位置偏移。元素仍然保持其未定位前的形状，它原本所占的空间仍保留，后面的盒子仍以标准流方式对待他（不脱标，继续保留原来的位置）。因此，移动元素会导致它覆盖其它框。

红色矩形框表示原来的位置，top偏移就是相对于原来盒子的顶部边框偏移量，left偏移就是相对于原来盒子的左侧边框偏移量

3.绝对定位absolute

设置为绝对定位的元素框偏移的位置是相对于它祖先元素的位置偏移。

1.如果没有祖先元素（不限制于父级元素）或者祖先元素都没有定位，则相对于浏览器页面也就是body元素来定位。top就是相对于body元素的上边框，left是相对于body元素的左边框。绝对定位使元素的位置与文档流无关，绝对定位不再占有原先的位置（脱标）。

2.祖先元素（不限制于父级元素）有定位，则以祖先元素为基准点对齐。top就是相对于祖先元素的上边框，left是相对于祖先元素的左边框。祖先元素都有定位，绝对定位的元素相对于最近一级已经定位的父元素来定位。

子绝父相

子绝父相就是子级元素绝对定位，父级元素相对定位。

1.子级元素绝对定位，不会占有位置，可以放到父盒子中的任何一个地方，不会影响其他兄弟盒子

2.父级元素相对定位，限制子盒子在父盒子中显示，父盒子在布局时需要占有原来的位置。

4.固定定位fixed

固定定位是元素固定于以浏览器可视窗口的位置，主要用于浏览器页面在滚动时元素的位置不会改变，浏览器窗口放大和缩小都不会改变，不管浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。固定定位不占有原来文档流中的位置（脱标）。

固定定位在版心的右侧

1.首先设置固定定位的元素盒子left为50%，定位在浏览器可视区一般的位置，版心要相对于浏览器水平居中，就固定在版心盒子的中间。

2.然后设置固定定位的元素盒子margin-left为版心盒子宽度的一半距离。

5.粘性定位sticky（了解，一般不用，而是通过js实现）

粘性定位是相对定位和固定定位的混合。

选择器 {
    position:  sticky;
}

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原来在文档流中的位置（相对定位特点）

3.必须添加top、left、right、bottom其中一个才有粘性定位的效果，否则就是相对定位。当设置了top、left、right、bottom其中一个时，就会在浏览器窗口滚动到参照点距离该元素还剩下设置的值时，就会变成固定定位。通过js监听页面滚动的距离也可以实现，最开始把元素设置为相对定位，当页面滚动到某个距离时再改成固定定位。

#one { position: sticky; top: 10px; }

在浏览器视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到浏览器视口回滚到阈值以下。

父元素不能有overflow:hidden或者overflow:auto属性，父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效，父元素高度不能低于sticky高度，z-index无效

定位的叠放次序

当多个元素同时设置定位时，定位元素之间有可能发生重叠。要想调整重叠定位元素的堆叠顺序，可以对定位元素使用z-index属性，其取值可为正整数、负整数、0。不写z-index默认为0，值越大就越会叠放在上面越靠上压住其他z-index比它小的定位盒子，也就是值越大距离用户的视线越近。数值后面不跟单位，只有相对定位、绝对定位、固定定位的盒子才会有此属性。

1.同级关系的定位盒子是不加z-index后来者居上，加z-index 值越大越在上面，如果值相等还是后来者居上

2.嵌套关系的定位盒子是不加z-index 默认子元素在上，只给子元素加z-index值<0 可实现父元素为上，如果给父元素也添加z-index父元素无论怎样 子元素都将在父元素上

3.嵌套+同层级定位盒子是如果父元素有其他兄弟元素 如果两者都没加z-index 后来者居上，两者父元素都没加z-index 若某一子元素z-index值大 那么该子元素将显示在上方 如果值相同 则后来者居上，如果父级都加了z-index 那么在进行比较时只比较父元素z-index值 值越大则父元素连同里面的子元素越靠上 如果值相等后来者居上