css之定位
定位核心——子绝父相
定位的应用场景：当有盒子压住盒子的需求是时，需要用到定位；滚动窗口时，盒子固定不动在屏幕的某个位置时。 定位可以实现标准流和浮动无法实现的效果
标准流可以从上向下摆放块级盒子，从左向右摆放行内盒子； 浮动可以从左向右摆放多个块级盒子，盒子之间没有缝隙并且顶端对齐； 定位可以让盒子： 1.摆放在另一个盒子中的任意位置； 2.固定在屏幕中的某个位置； 3.可以压住其他盒子。
定位的组成部分
什么是定位：将盒子定在某个位置 定位=定位模式+边偏移 组成定位的两个属性： 1.position 2.
定位的模式： 序号 值 语义 1 static 静态定位 2 relative ☆ 相对定位 3 absolute ☆ 绝对定位 4 fixed ☆ 固定定位 5 sticky 粘性定位
边偏移有几个属性 边偏移属性 示例 描述 top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离。 bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离。 left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离。 right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离 标准流或浮动不能使用这四个属性，只有定位才能使用
相对定位
静态定位的作用： 静态定位是元素的默认定位模式，无定位的意思 语法规范： 选择器{ position: static; }
静态定位按照标准流特性摆放位置，没有边偏移 开发中用的很少
相对定位：元素在移动位置的时候，是相对于它原来的位置来说的（自恋型） 相对定位（relative）的语法 选择器{ position: relative; } 相对定位（relative）是相对它原来的位置来定位的，原来的位置继续占有（不脱标），后面的盒子继续按照标准流的 方式对待 只给盒子设置了 position: relative; 属性，盒子的位置并不会发生变化，需要添加边偏移
绝对定位 相对于最近一级设置了定位属性父级元素定位的（不包含静态static）（拼爹性）
「绝对定位（absolute）」
绝对定位（absolute）是相对他的带有定位的祖先元素定位 绝对定位（absolute）的语法是 选择器{ position: absolute; } 绝对定位的特： 1.如果盒子没有父级（是 body 的亲儿子）或者父级没有定位，会相对浏览器定位 2.相对最近一级有定位属性的父级元素定位，如果所有父级都没有定位属性则相对于浏览器定位。 （在布局时，让盒子相对父级以上的元素定位不好，很乱，一旦出现问题，很难排查，通常给父亲加相对定位，子绝父相）
绝对定位不占有原来的位置，真正意义上的脱标，他会压住任何元素 可以在父盒子中任意移动位置，同时不会影响父盒子中的其他元素
子绝父相 子级使用绝对定位，父级使用相对定位 父级使用相对定位： 不脱标，在标准流中占据空间 绝对定位的儿子们都参考父亲进行定位 子级使用绝对定位： 脱标，不影响其他元素的摆放 自己则相对父级任意摆放位置
子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。
固定定位（fixed）（重要） 是相对浏览器可是区域来定位 应用场景：固定定位是元素固定于浏览器可视区位置 固定定位（fixed）的语法 选择器{ position: fixed; } 固定定位特点 1.跟父元素没有关系，不随滚动条滚动 2.固定定位（fixed）的元素会脱标，不占有原先的位置，也可以看做是一种特殊的绝对定位
在开发时为什么不建议直接控制图片，而是要给图片加一个父盒子，因为父盒子里不但可以放图片，还可以放其他元素 用户调整浏览器的大小时浏览器的可视区域会变化，固定定位的元素不会变
小技巧：固定定位定位到板心右侧 算法： left: 50%； margin-left: 板心宽度的一半+缝隙宽度;
固定定位定位到板心左侧 left: 50%； margin-left: -（负值）（板心宽度的一半+盒子本身宽度+缝隙宽度）;
粘性定位（sticky）：相对定位和固定定位的混合 粘性定位（sticky）的特点： 1，粘性定位（sticky）同样也是相对浏览器的可视窗口来定位的； 2，粘性定位（sticky）不脱标，会占有原先的位置 3，必须添加上下左右四个边偏移属性之一才会生效
粘性定位（sticky）的应用场景： 把导航栏固定在屏幕的顶部，始终保持可见 把操作菜单固定在屏幕的左侧或右侧，始终保持可见
粘性定位（sticky）语法规范： position: sticky; 与页面滚动搭配使用，兼容性较差，IE不支持
定位的叠放次序 默认叠放次序：与结构有关系，后来者压前者
定位的叠放次序的应用场景 在使用定位时，如果出现盒子重叠的情况，可以使用 z-index 控制盒子的前后顺序。 定位的叠放次序语法规范： z-index: 数值; 注意事项： 1.数值是整数，默认是 auto，数值越大，盒子越靠前； 2.数值相同，按书写顺序显示，后书写的盒子显示在上方； 3.数值后面没有单位； 4.只有定位的盒子在可以使用 z-index 属性。 当提升层级无效时，给父级元素添加层级
绝对定位的盒子居中算法
绝对定位的盒子实现居中的步骤 left: 50%; 向右移动到父盒子宽度的一半； margin-left: -宽度的一半; 利用负数向左移动子盒宽度的一半； top: 50%; 向下移动到父盒子高度的一半； margin-top: -高度的一半; 利用负数向上移动子盒高度的一半。
「定位的特殊特性」问题
行内元素添加绝对或固定定位后，可以直接设置宽度和高度 块级元素添加绝对或固定定位后，如果不给宽度和高度，大小是和内容宽度相同，与浮动相似 脱标的盒子不会触发外边距合并
TIP
布局的时候要养成一个习惯： 布局的盒子只负责布局，不要负责内容； 内容的盒子使用布局盒子包裹起来。 这样，在布局的时候既轻松又愉快。
固定定位和绝对定位会压住文字，因为他们是完全脱标的；浮动不会，因为浮动产生的本质是为了图文混排； 浮动最开始的设计是为了实现文字环绕效果的。
网页布局总结
一个完整的网页，是由标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
标准流
块级元素上下排列 / 行内元素或行内块元素左右排列； 垂直的块级盒子显示就用标准流布局。 浮动
让多个块级元素一行显示或者左右对齐盒子； 多个块级盒子水平显示就用浮动布局。 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示； 如果元素自由在某个盒子内摆放就用定位布局。
显示属性 本质：让一个元素在页面中隐藏或者显示出来 1.display 显示隐藏 2.visibility显示隐藏 3.overflow显示隐藏
display 显示隐藏元素
display：none 特点：隐藏元素之后，不再占有原来的位置 display属性的作用：none：隐藏元素；block：显示元素 后面常用，和js搭配使用可以做很多网页特效
visibility显示隐藏
visibility的属性及作用 visibility：visible 元素可视 visibility：hidden 元素隐藏
visibility隐藏元素后，继续占有原来的位置
overflow 溢出显示隐藏
overflow 属性 overflow 属性的作用 属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll 不管超出内容否，总是显示滚动条 auto 超出自动显示滚动条，不超出不显示滚动条
如果有定位的盒子，请慎用，因为你会隐藏超出的部分
TIP 除了 visible，浏览器在渲染其他三个属性的元素时，都需要先计算出盒子的准确大小和边界。 而一旦有了准确的大小和边界，外边距合并、盒子塌陷、清除浮动等问题也就随之解决了。
