div的三维立体结构是怎样的？

background的范围是从哪里到哪里？

方法：在开发者工具里面调试border边框的透明度；

注：直接按上下键会以1的速度变化，按alt+上下键则会以0.1的速度变化，我们选择后者；

代码演示：测试案例

答案：background的范围是border外边沿围成的区域。

直观可以看到的结论是：文字内容可以遮住background，border可以遮住background，那三维结构呢？下面就通过几个问题来探讨div的三维结构

文字内容相对border的位置呢？

方法：将文字内容和border重合，答案见下图：

文字内容可以在border（红色边框）之上；

代码演示：测试案例

块级元素相对于内联元素的位置呢？

方法：文字内容和块级元素重合，答案见下图：

文字内容（内联元素）在块级元素（白色长条）之上；

代码演示：测试案例

浮动元素相对于内联元素的位置呢？

方法：浮动元素和文字内容重合，答案见下图：

内联元素（文字内容）在浮动元素（绿色方块）之上；

代码演示：测试案例

浮动元素相对于块级元素的位置呢？

方法：二者重合，答案见下图：

浮动元素（绿色方块）在块级元素（白色长条）之上；

代码演示：测试案例

浮动元素的文字相对于内联元素的文字内容呢？

方法：二者重合，答案见下图：

内联元素的文字内容在浮动元素文字内容之上；

代码演示：测试案例

块级元素的文字内容相对于内联元素的文字内容呢？

方法：二者重合，答案见下图：

内联元素的文字内容在前，块级元素内容在后：

代码演示：案例测试

内联元素的文字内容在后，块级元素在前：

代码演示：案例测试

块级元素的文字内容和内联元素的文字内容是根据出场顺序安排的位置来决定的，后来者居上；

答案：

background在最底层，向上依次是border、块级子元素、浮动元素、内联元素（文字内容），见3D示意图：

属性position

position: static

默认值，表示当前元素在文档流中

代码演示

position: relative

所占位置不变，只是相对于一开始的位置有了偏移，而且升起来了，又不脱离文档流。

如果再出现另一个参照物蓝色方块，蓝色方块会认为绿色方块还在原来的位置，所以会有如图效果：

代码演示

使用场景

• 用做位移（被flex代替）

  

  代码演示

• 和absolute元素搭配使用（往下看）

• 配合z-index：

  • z-index:auto：是默认值

    

    默认情况下是蓝色遮住绿色

    注：默认情况是auto，auto计算出来的值是0，但是写0又和写auto不一样；

    代码演示

  • z-index: 0/1/2或者z-index: -1/-2：改变默认状态，自己决定谁遮住

    

    注：蓝色方块和绿色方块谁的值大，谁就在上边；

    代码演示

不要写z-index:9999

position: absolute

绝对定位，定位基准是祖先里的非static

使用场景

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

  

  注：某些浏览器上会因为没有写top/left而位置错乱，故上下左右至少写两个来定位位置； 注： absolute是相对于祖先元素中最近的一个定位元素（position不是staic的）来定位的；

  代码演示

• 鼠标提示

  

  注：鼠标悬浮在点击按钮上时，才会显示提示内容；

  注：善用left: 100%/right: 100%/top: 100%/bottom: 100%，如：bottom: 100%会让提示内容出现在按钮最上方；

  代码演示

• 配合z-index

position: fixed

固定定位，定位基准是viewport（后来自己打脸）

无论你如何滑动，被position: fixed;标注的内容会始终相对于视口不变；

代码演示

注：如果被position: fixed;标注的div在含有transform的div中就会使fixed的作用失效；代码演示

使用场景

• 讨人厌的广告
• 回到顶部的按钮
• 配合z-index

bug

手机上不要使用position: fixed;，有文有真相（可搜索移动端fixed）

sticky

粘滞定位，适合写导航，兼容性差

代码演示