前端入门-第八天（定位）

☆1. 定位核心 —— 子绝父相

1.1定位概念

以不同的方式，把盒子定在某一个位置。

特点：

1. 摆放在另一个盒子中的任意位置；

2. 固定**在屏幕中的某个位置

3. 可以压住其他盒子。

1.2 定位构成

• 定位 = 定位模式 + 边偏移`

  • 定位模式：用于指定元素的定位方式，通过 position 属性设置

  • 边偏移：根据定位模式确定最终位置，通过 top、bottom、left、right 四个属性设置

1.3 静态定位

• 静态定位 static 是元素的默认定位方式，表示没有定位的意思，类似于：border 属性的 none；
• 静态定位按照标准流特性摆放位置，它没有边偏移，使用边偏移没有效果；
• 静态定位在布局时几乎不用。

1.4 相对定位

语法：position: relative;

特点：

1.相对定位是相对元素自己原来的位置**来定位的（自恋）

2. 相对定位不会脱标，原有在标准流的位置继续保留，后面的盒子仍然以标准流的方式对待它。

1.5 绝对定位

语法：position: absolute;

特点：

1.相对最近一级设置了定位属性父级元素定位的（不包含 static）（拼爹型）

2.如果盒子没有父级（是 body 的亲儿子）或者父级没有定位，会相对浏览器定位。

3.不再占有原先的位置

1.6 子绝父相

• • 子级使用绝对定位，父级使用相对定位
  • 父级使用相对定位：
    • 不脱标，在标准流中占据空间
    • 绝对定位的儿子们都参考父亲进行定位
  • 子级使用绝对定位：
    • 脱标，不影响其他元素的摆放
    • 自己则相对父级任意摆放位置

2. 定位方式 —— 固定和粘性

2.1 固定定位

语法：position: fixed;

特点

• 固定定位（fixed）是相对浏览器的可视窗口来定位的；
• 可以在浏览器的页面滚动时，元素的位置保持不变。
• 固定定位的元素同样不会占有原先的位置。

在开发时为什么不建议直接控制图片？而是要给图片加一个父盒子？

• 图片默认是按照实际大小显示的；

• 页面中的图片通常会很多；

• 用一个盒子包起来，控制图片更容易。

• 用户调整浏览器的大小时浏览器的可视区域会变化，固定定位的元素会根据边偏移属性重新调整显示位置。

2.2 固定定位小技巧-固定到版心右侧

• 固定到版心右侧的实现步骤：
  1. left: 50%;；
  2. margin-left: 版心宽度的一半。

2.3 粘性定位（sticky）（了解）

应用场景：

1.把导航栏固定在屏幕的顶部，始终保持可见

2.把操作菜单固定在屏幕的左侧或右侧，始终保持可见

语法：position: sticky；

特点：同样也是相对浏览器的可视窗口来定位的，不脱标，会占有原先的位置。

注意事项：必须指定一个边偏移的属性；兼容性不好

2.4 定位总结

序号	值	语义	脱标	移动位置	常用	场景
1	static	静态定位	否	不移动	几乎不用	不定位
2	relative ☆	相对定位	否	相对自身	常用	子绝父相
3	absolute ☆	绝对定位	是	带定位的父级	常用	子绝父相
4	fixed ☆	固定定位	是	浏览器可视区	常用	浏览器可视区
5	sticky	粘性定位	否	浏览器可视区	不常用	浏览器可视区

3. 定位扩展

3.1盒子的前后顺序

在使用定位时，如果出现盒子重叠的情况，可以使用 z-index 控制盒子的前后顺序。

语法：z-index: 数值;

• 定位的叠放顺序有什么注意事项？
  1. 数值是整数，默认是 auto，数值越大，盒子越靠前；
  2. 数值相同，按书写顺序显示，后书写的盒子显示在上方；
  3. 数值后面没有单位；
  4. 只有定位的盒子在可以使用 z-index 属性。

3.2 绝对定位的盒子居中算法

绝对定位的盒子实现水平居中的步骤：

方法一：（重点）

1. left: 50%; 向右移动到父盒子宽度的一半；

2. margin-left: -宽度的一半; 利用负数向左移动子盒宽度的一半；

3. top: 50%; 向下移动到父盒子高度的一半；

4. margin-top: -高度的一半; 利用负数向上移动子盒高度的一半。

   方法二：（拓展）

   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: 0 auto;
   

简单理解为：四个方向有相同的力在拉这个盒子，配上margin:auto让这个盒子的位置保持中立，来达到盒子处于正中心的目的。

• TIP：
  • 绝对定位之后，不仅会脱标，而且有层次 —— 没有相邻的盒子；
  • 此时与边偏移属性联用，修改 margin 可以参照盒子的外边框位置继续调整盒子的位置。
  • 后期有更精妙的写法，尽情期待…

3.3 定位的特殊特性

· 行内元素添加绝对或固定定位后，可以直接设置宽度和高度。

· 块级元素添加绝对或固定定位后，如果不给宽度和高度，大小默认是实际内容的大小。

· 脱标的盒子（浮动、绝对定位、固定定位）不会触发外边距合并。

TIP

布局的时候要养成一个习惯：

1. 布局的盒子只负责布局，不要负责内容；
2. 内容的盒子使用布局盒子包裹起来。

这样，在布局的时候既轻松又愉快。

3.4 浮动元素不会压住标准流的文字定位

• 绝对定位和浮动哪一个会压住下面标准流的文字？为什么？
  • 绝对定位会压住文字，浮动不会；
  • 浮动最开始的设计是为了实现文字环绕效果的。

3.5 网页布局总结

一个完整的网页，是由标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

1. 标准流
   • 块级元素上下排列 / 行内元素或行内块元素左右排列；
   • 垂直的块级盒子显示就用标准流布局。
2. 浮动
   • 让多个块级元素一行显示或者左右对齐盒子；
   • 多个块级盒子水平显示就用浮动布局。
3. 定位
   • 定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示；
   • 如果元素自由在某个盒子内摆放就用定位布局。

5. 显示隐藏元素

5.1 display显示隐藏元素

• display: none; 隐藏元素，不再占有原来的位置
• display：block 除了转换为块级元素之外，同时还有显示元素的意思。

5.2 visibility 显示隐藏元素

Visibility属性用于指定一个元素应可见还是隐藏；

• visible 元素可见；
• hidden 元素隐藏，但是空间会保留；

5.3 overflow 溢出显示隐藏

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

TIP

在 Windows 下 scroll 和 auto 有区别，但是在 macOS 下，都会按照 auto 显示。

除了 visible，浏览器在渲染其他三个属性的元素时，都需要先计算出盒子的准确大小和边界。

而一旦有了准确的大小和边界，外边距合并、盒子塌陷、清除浮动等问题也就随之解决了。