从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
复习：从零开始学前端：显示隐藏与文本溢出 — 今天你学习了吗？（CSS：Day16）
文章目录
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）前言第十七节课：定位一、定位二、静态定位三、相对定位四、绝对定位五、子绝父相六、定位居中七、固定定位八、定位的叠放次序z-index前言
缝缝补补又一年…
第十七节课：定位
一、定位
为什么要定位？当我们滚动窗口的时候，某些盒子是固定屏幕的某个位置的，比如一些导航栏。
这样的效果，标准流或浮动都无法快速实现，此时需要定位来实现。定位的组成
定位：
将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
3. 定位模式
定位模式决定元素的定位方式，他通过CSS的position属性来设置，其值可以分为四个
边偏移
边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right4个属性。
|边偏移属性|示例|描述|
|-|-|-|
|top|top:80px|顶端偏移量，定义元素相对其父元素上边线的距离。|
|bottom|bottom:80px|底部偏移，定义元素相对于其父元素下边线的距离。|
|left|left:80px|左侧偏移量，定义元素相对其父元素左边线的距离。|
|right|right：80px|右边偏移量，定义元素相对于其父元素右边线的距离|
二、静态定位
静态定位是元素的默认定位方式，无定位的意思。
选择器{poisition；static;}
静态定位按照标准流特性摆放位置，他没有边偏移
静态定位布局时很少用到
实例：
效果：并没有被top：100px影响
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>静态定位</title><style>.one{width: 300px;height: 300px;background-color: teal;position: static;top: 100px;/* 静态定位没有定位，无法使用边偏移，无法使用top：100px; */}</style></head><body><div class="one"></div></body></html>
三、相对定位
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
选择器{opisition：relative;}
相对定位的特点：（重点）-----占位置，不脱离标准流。
它是相对自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。在原来的标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
实例：
相对原来位置元素，top：50px；
然后相对于自己原来的位置又margin-left: 50px;
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相对定位</title><style>.one {width: 200px;height: 200px;background-color: teal;position: relative;top: 50px;margin-left: 50px;}</style></head><body><div class="one"></div></body></html>
四、绝对定位
绝对定位是元素在位移位置的时候，是相对于它祖先元素来说的。
选择器：{position：absolute;}
绝对定位的特点：(务必记住) ----不占位置，脱离标准流。
如果没有祖先元素或者父元素没有定位，则以浏览器为准定位（Document文档）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位祖先元素为参考点移动位置。绝对定位不再占有原先的位置（脱标）
应用：oppo商城的隐藏二维码位置（类似贴纸）
实例：
two代码相对于one代码top:30px;
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位</title><style>.one {width: 300px;height: 300px;background-color: teal;position: relative;}.two{width: 100px;height: 100px;background-color: pink;position: absolute;top: 50px;}</style></head><body><div class="one"><div class="two"></div></div></body></html>
五、子绝父相
‘子绝父相’，是定位中最常用的一种方式，这句话的意思是：子级是绝对定位的话，父级要用相对定位。
子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他兄弟盒子。
父盒子布局时，需要占有位置，因此父亲只能是相对定位。
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。
总结：
因为父级需要占有位置，因此是相对定位，
子盒子不需要占有位置，则是绝对定位，
当然，子绝父相不是永远不变的，如果父元素不需要占有地方，子绝父绝也会遇到。
六、定位居中
有时候我们在做项目的时候就会需要将绝对定位在相对定位中完全居中，
那么这个时候可以使用特殊的方法来将他居中
top：0；right：0；bottom：0；left：0；margin：auto；
实例：
CSS:
<style>.father{width: 600px;height: 600px;margin: 0 auto;background-color: antiquewhite;position: relative;}.son{/* 此时子元素中的margin没有用的 *//* margin: 0 auto; *//* 完全居中 */margin: auto;top: 0;right: 0;bottom: 0;left: 0;width: 400px;height: 400px;background-color: skyblue;position: absolute;}</style>
html:
<div class="father"><div class="son"></div></div>
七、固定定位
固定定位是元素固定在浏览器里面的位置。主要适用场景：可以在浏览器页面滚动时元素的位置不会改变。
poisition:fixed；是CS固定定位，一般用于导航栏吸顶效果。
注意！----不占位置
固定定位的盒子必须有宽度
也就是必须设置width，如果没有设置宽度，那么该盒子的宽度就是内容撑开的宽度，如果没有内容那么会默认为0，从而无法在页面上看到。由于固定定位一般用于导航栏吸顶效果，所以必须给它设置合适的版心宽度。固定定位的盒子跟父级盒子无关，它是以屏幕为准
问： 当我需要固定在版面的右侧的时候应该怎么做？
让固定定位的盒子left：50%，走到浏览器可视区（也可以看做版心）的一半位置。让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐。
实例：
往下拉滚动条：
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;background-color: skyblue;}.header{width: 500px;height: 200px;background-color: teal;position: fixed;}</style></head><body><div class="header"></div>....重复性文字</body></html>
八、定位的叠放次序z-index
在使用定位布局的时候，可能出现盒子重叠现象，此时可以使用z-index来控制盒子的前后次序。
数值可以为负数，数值越大，越靠上。如果值相同，则按照书写顺序，后来者居上。只有定位的盒子才有z-index属性。z-index的属性是不带单位的
数值越大越往前
实例：
原：
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Z-index</title><style>div {color: purple;font-size: 40px;text-align: center;position: absolute;/* position: fixed */}.one {width: 300px;height: 300px;background-color: skyblue;}.two {width: 100px;height: 100px;background-color: teal;}.three {width: 200px;height: 200px;background-color: pink;}</style></head><body><div class="one">1</div><div class="two">2</div><div class="three">3</div></body></html>
修改叠放次序：
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Z-index</title><style>div {color: purple;font-size: 40px;text-align: right;position: absolute;/* position: fixed */}.one {width: 300px;height: 300px;background-color: skyblue;z-index: 1;}.two {width: 100px;height: 100px;background-color: teal;z-index: 3;}.three {width: 200px;height: 200px;background-color: pink;z-index: 2;}</style></head><body><div class="one">1</div><div class="two">2</div><div class="three">3</div></body></html>
预习：从零开始学前端：字体图标的引入 — 今天你学习了吗？（CSS：Day18）
------当你还不能对自己说今天学到了什么东西时，你就不要去睡觉。
