15.定位合集

1.为什么需要定位：某个盒子要压住其他盒子 / 某个盒子要固定在屏幕中的某个位置

浮动可以让多个块级盒子一行没有缝隙排列显示，用于横向排列的盒子，浮动只会影响后面的盒子，前面的标准流盒子不受影响；

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

2.定位=定位模式+边偏移

定位模式：静态定位static | 相对定位 relative | 绝对定位 absolute | 固定定位 fixed

边偏移：top | left | right | bottom

静态定位static:可以理解为就是标准流

相对定位 relative：1.元素在移动位置的时候，是相对于它原来的位置来说的；2.不脱标，继续保留原来位置；3.也就是说原来的位置，还会占有，会影响标准流（所有给绝对定位当爹）

绝对定位absolute：1.没有父级或无定位父级，则以浏览器为准定位；

                            2.父级有定位则以最近一级有定位（相对，绝对，固定）的父级来定位；

                                3.绝对定位脱离标准流，不占有远来的位置；

子绝父相：绝对定位的父级可以是fixed/relative/absolute，子绝父绝也是会有的

固定定位fixed：1.固定定位固定于浏览器可视区的位置（用于浏览器页面滚动时，元素位置不改变的情况）2.不随滚动条滚动，固定定位不占有原来的位置，也是脱标的，可以看作特殊的绝对定位。

固定定位小技巧：固定在版心右侧位置（left:50%浏览器的50%；再走版心宽度的一半margin-left:600px;）

position:fixed;不占有位置

1.走浏览器的一半：left:50%;

2.走版心的一半：margin-left:600px;

粘性定位sticky：相对定位和固定定位的混合

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

2.粘性定位占有原来的位置

3.必须加top,left,right,bottom中一个才有效，否则会被当做相对定位了

{    position：sticky；

        top：0；}     特点：盒子滚动直到顶端，就会黏在浏览器顶端，兼容性较差

定位叠放次序：z-index：1；

绝对定位的盒子居中算法：1.left ，top 走 50% 父容器宽度的一半

                                                2.margin-left   margin-top  负值 往左走 自己盒子宽度的一半

重点：

1.行内元素添加绝对或固定定位，或浮动，可以直接设置高度和宽度；

2.块级元素 添加 绝对定位 或者固定定位，如果不给宽高，默认大小就是内容的大小

3.浮动元素，绝对定位（固定定位）元素都不会触发外边距合并问题（脱离标准流，都不会触发外边距合并问题’）