公输的前端学习记录day19-css定位

        定位

1.1 原因：

（1）某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。

（2）当我们在滚动窗口时，盒子是固定在屏幕的某个位置的。

1.2，定位组成

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

定位=定位模式+边偏移。

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

（1）定位模式

   通过position属性来设置，属性值有以下四个：

static 静态定位  relative相对定位

absolute 绝对定位  fixed固定定位

（2）边偏移

 边偏移就是定位的盒子移动到最终位置，有top，bottom，left，right。

如：top：80px，顶端偏移量，定义元素相对于其父元素上边线的距离。

1.3静态定位static（了解）

静态定位是元素的默认定位方式，无定位的意思。

语法：选择器｛position：static｝

静态定位按照标准流特性摆放位置，它没有边偏移。在布局时很少用到。

1.4相对定位relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）

语法：选择器｛position：relative；｝

特点：（1）移动位置的时候参照点是自己原来的位置。

（2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式来对待它。（不脱标，继续保留原来的位置）

因此，相对定位并没有脱标，它最典型的应用就是给绝对定位当爹的。。。

1.5绝对定位absolute（重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

语法：选择器｛position：absolute；｝

特点（务必记住）：

1，如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（document文档）。

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

3，绝对定位不再占有原先的位置（脱标）

1.6 子绝父相

“子绝父相”非常重要，是我们学习定位的口诀，意思是子级是绝对定位的话，父级要用相对定位。

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

（2）父盒子需要加定位限制子盒子在父盒子内显示

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

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

注：子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

1.7固定定位fixed（重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素位置不发生改变

语法：选择器｛position：fixed；｝

固定定位的特点：（务必牢记）

1. 以浏览器的可视窗口为参照点移动元素。
2. 跟父元素没有任何关系
3. 不随滚动条滚动
4. 不占有原先位置（固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位）

     固定定位不是一定贴着浏览器的四个角的，也可以和版心对齐，如返回顶部的按钮。

固定定位小技巧：固定在版心右侧位置。

小算法：

1. 让固定定位的盒子left：50%，走到浏览器可视区（也可以看做版心）的一半位置。
2. 让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置。

1.8 粘性定位sticky（了解）

粘性定位可以被认为是相对定位和固定定位的混合。

语法：

选择器｛position：sticky；top：10px；｝

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素
2. 占有原先的位置
3. 必须添加top ，left，right，bottom其中一个才有效。

   跟页面滚动搭配使用，兼容性较差，IE不支持。