css定位 position
css定位 场景
当滚动条滚动时，某个元素保持不动
定位组成
将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位= 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
定位模式（） 值语义
静态定位
相对定位
绝对定位
fixed
固定定位
边偏移
left right top
边偏移属性描述
top
顶端偏移量，定义元素相对于其父元素上边线的距离
底部偏移量，定义元素相对于其父元素下边线的距离
left
左侧偏移量，定义元素相对于其父元素左边线的距离
right
右侧偏移量，定义元素相对于其父元素右边线的距离
在使用定位的时候需要和边偏移一起使用，否则就跟没有使用定位一个效果，一动不动
静态定位（了解）
静态定位是元素的默认定位方式，无定位的意思
{position:static;}
相对定位（重要）
相对定位是元素在移动位置的时候，是相对于他原来的位置来说的（自恋型）
{position:relative}
特点（重要）：
<style>div{border: 1px solid ;margin: 2px;}.container{height: 200px;width: 200px;}.container div{height: 50px;width: 50px;}
style>
<div class="container"><div>1div><div>2div><div>3div>
div>
绝对定位（重要）
绝对定位是元素在移动位置的时候，是相对于他的祖先（父）元素来说的 （拼爹型）
特点（重要）：
如果祖先元素有定位（相对、绝对、固定定位） ， 则以最近的一级的有定位的祖先元素为参考点进行移动（一般给父元素添加{:}）（父相子绝）绝对定位不再占有原来的位置，将脱离文档流，,如下图中的左右切换按钮和轮播，都是可以使用这种方式，来定位并且脱离文档流，不占用背景轮播图的位置
子绝父相
意思就是子元素设置绝对定位，父元素设置相对定位
实现上面好声音的布局，可以说是非常的方便了，设置父元素相对定位，设置左边绝对定位，往下百分之50，设置右边绝对定位，向下百分之50，靠右边，设置轮播绝对定位，向下百分之80，距离左边百分之5
<style>div{border: 1px solid ;margin: 2px;}.container{position: relative;}.left{position: absolute;top: 50%;}.right{position: absolute;right: 0;top: 50%;}.lb{position: absolute;top: 80%;left: 5%;}.background{height: 200px;background-color: #bfa;}
style><div class="container"><div class="left">左div><div class="right">右div><div class="background">背景div><div class="lb">轮播div>div>
固定定位fixed（ 重要）
固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素位置不会改变
{position:fixed}
特点（重要）：
固定定位不占有原先的位置，也是脱离文档流的，可以看做是一种特殊的绝对定位 固定定位-定位到版心右侧
例如下图的右下角的返回顶部按钮，这个盒子不是固定到浏览器的固定位置，而是固定到版心也就是内容区的右下角，这个如何实现呢？
一个小技巧：
总结：也就是先走浏览器的一半，再加版心（内容区）的一半，就是固定到版心的右侧
粘性定位（了解）
粘性定位可以认为是相对定位和固定定位的混合。
{position:sticky}
特点：
总结
定位叠放次序z-index
在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序
定位拓展 绝对定位的盒子居中
加了绝对定位的盒子（:）不能通过:auto实现水平居中，但是可以通过以下计算方法实现水平和垂直居中
垂直居中也类似，先走top50% 在走自己的高度的一半
定位的特殊性
绝对定位和固定定位也和浮动类似
绝对定位（固定定位）会完全压住盒子
例如下面这个案例，当div设置了浮动之后，脱离文档流，下面的p元素就会上移到原来div的位置，并且div会压住p元素，但是不会压住p标签的内容和图片，这是与绝对定位（固定定位）不同的，如果给div设置了绝对定位或固定定位，则会将p标签的内容也遮住。
<style>.box{float:left;width:150px;height:150px;background-color:pink;}
style>
<div class="box">div>
<p>阁下何不同风起，扶摇直上九万里p>
浮动
绝对定位
那么为什么浮动不会压住文字呢？因为浮动最初发明出来的时候就是为了做文字环绕效果。
当我们在一段文字中插入一张图片，则图片会将文字撑开
如果我们给图片增加个浮动，则会出现环绕效果
