复习盒模型

盒模型组成元素谁高谁低：

background的范围是margin外围到内容:可用border半透明调式

文字内容在最上面，border在第二层，background在最下面

一个div分层：

从左侧看一个div，用代码验证

1624760272(1).jpg

文字高低得出结果：div的文字>浮动文字
正常文字：后出现的会高于前面存在的

position的五个属性

static 默认值，待在文档流中也就是可以理解为正常的文档流，一般不写。
relative 相对定位，相对于自己的位置定位，升起来，但是不脱离文档流。
absolute 绝对定位，定位基准是祖先里的非static的元素。是相对于祖先元素中最近的一个定位元素定位的，并不是只相对于relative定位的（一般在写代码时我们都是让他和relative成对出现）。
fixed 固定定位，定位基准是视口（viewport），也就是相对于视口的定位。但是如果它的父元素加上transform：scale（x）那么它就不是相对于视口的定位了，所以尽量不要把fixed写在有transform：scale（x）的父级元素上。手机上也尽量不要用。
sticky粘滞定位。如果在浏览器页面上能看到sticky属性的元素，它按照文档流排列，一旦滑动浏览器的页面，当要把元素划过时，它就会粘在也页面的最上方，也就是始终保持在浏览器的头部，像导航条一样，但是不影响滑动（现在大部分浏览器还不支持）

关于position的一些经验

如果写了absolute，一般都要补一个relative。
如果写了absolute或fixed，一定要写top和left（有些浏览器不写会出错）。
善用left：100%，left：50%，加负margin、bottom：100%。
absolute使用left:100%,会基于它的relative或根元素html的大小。
一般来说一个东西的关闭按钮（对话框等）都是用绝对定位absolute来写的。

position:relative

站的位置不变，只是显示对比之前有些偏移

用于做位移（很少用）

用于做absolute元素的爸爸

配合z-index

1、z-index只对有定位属性的元素有效，一般情况下是数只能越大就在最上面，所以如果想改变他们的上下关系直接改动z-index的值。

2、默认情况下z-index：auto,不创建新层叠上下文

3、z-index: 0/1/2，数字大的高于数字小的

4、z-index: -1/-2

position:absolute

使用场景：

脱离原来的位置，另起一层，比如对话框的关闭按钮

鼠标提示

button{
  position: relative;                  **要有爸爸relative才能用absolute**
}
button span{
  border: 1px solid red;
  position: absolute;
  white-space: nowrap;                 **文字不自动换行**
  bottom: calc(100% + 10px);           **高于底部100%+10px**
  left: 50%;
  transform: translatex(-50%);         **让span居中于button**
}
button span{
  display: none;                       **不显示提示内容**
}
button:hover span{                    **button悬浮的时候才显示span**
  display: inline-block;
}
复制代码