持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
div分层
布局和定位的区别？
布局是处于同一平面上的内容，而定位则是处于三维空间的。就好比布局是处于电脑屏幕面，而定位则是垂直于电脑屏幕面的。
盒模型：
如何通过代码推测盒模型分层？
- border高于background: 通过rgba将border的透明度调低，可以透过border看见背景的颜色。
- 文字高于border与background： 通过调整字体大小，发现"文字"二字覆盖住了边框以及背景。
-
文字高于块级子元素： 通过新建一个child的块级子元素，使用负margin使块级子元素上移10px，发现文字内容覆盖住child元素。
-
文字高于浮动元素，浮动元素高于块级子元素: 创建一个float元素，通过负margin将float元素上移，发现文字覆盖住橙色的浮动元素，浮动元素覆盖住块级子元素。
- 文字在盒模型中层级高低是按照文字出现的先后顺序来决定的，后出现的覆盖住先出现的。
一个div的分层：
position
position一般有五个取值：
- static默认值，呆在文档流里。
- relative相对定位，升起来，但不脱离文档流。
- absolute绝对定位，定位基准是父元素内的非static元素。
- fixed固定定位，定位基准是viewpoint。
- sticky粘滞定位。
static
relative
demo在文档流中的位置没有发生变化，只是显示位置发生了变化。
absolute
将container作为父元素，添加
position：relative，使close以container为基准进行定位。
将鼠标悬浮在button上时，出现鼠标提示。
fixed
始终处于视口，但是bug较多。
sticky
当没有到达粉色元素时，往下滑动显示为正常文档流，当达到粉色元素时，粉色div元素沾黏在顶部。
