什么是CSS层叠上下文？我们有一个基本样式的div，样式如下：div{width:200px;高度：200px；边框：10px纯红色；填充：15px；margin:12px;}效果如下：这里有个问题：border和background是什么关系？这里有两个选项：平行边框更贴近用户，背景更贴近用户，你会选择哪个？其实理解起来很简单，我们只需要将边框设置为半透明就知道答案了。绿色，所以边界更接近用户。这时候你就知道div不是平面的，竖屏上是有层级关系的，那么这个层级关系就叫做层叠上下文。然后我们在div中写上“Hello,world”，效果如下：这里还有一个问题，这个“Hello,world”是在哪一层，在border上还是在border和background之间？这里我们只要把'hello'移到边框就知道原因了，那么怎么把文字移到那里呢？这里我们使用text-indent，样式如下：div{width:200px;高度：200px；边框：10px实心rgb(255,0,0);填充：15px；边距：12px；背景色：绿色；text-indent:-20px;}效果如下：从运行效果可以看出，文字是在边框上的，所以文字区域（行内元素）离用户更近了。如果div里面有一个div怎么办？代码结构如下：//html
