css如何让两个div上下排列_深入了解CSS层叠上下层

1.要想理解层叠上下层，首先要先从文档流和盒模型说起

文档流

在CSS中，文档流是一个很基础也是很重要的一个概念。很多时候她被称为Document Flow，但在CSS的标准被称为Normal Flow，即普通流或常规流。大家更喜欢称之为文档流。那么CSS的文档流是怎么一回事呢？

在HTML中任何一个元素其实就是一个对象，也是一个盒子。在默认情况下它是按照出现的先后顺序来排列，而这个排列的顺序就是文档流。

而页面中的文档流主要包括三部分：块、内联、内联块

流动方向

• inline元素从左到右，到达页面最右边才会换行
• block元素从上到下，每一个都会另起一行
• inline-block元素也是从左到右，但是但页面最右面的宽度不够存放一个inline-block元素的宽度，整个元素就会一起换行

宽度

• inline元素的宽度为内部inline元素的和，不能用width指定
• block元素的宽度默认自动计算宽度，可以用width指定
• inline-block元素的宽度为内部元素的和,可以用width指定

高度

• inline元素的高度是有line-height间接确定的，与height无关
• block元素的高度有内部文档流元素决定，可以设置height
• inline-block元素的高度与block类似

盒模型

在一个文档中，每一个元素都被抽象成一个盒子，每一个盒子又包括四部分(从内到外):内容(content)，内填充(padding)，边框(border)，外边距(margin)。

1.我们一直都知道一个盒模型的background包括content和padding，那下面我们考虑一下，background的范围是从border的外边缘围成的区域还是从border的内边缘围成的区域呢？

代码验证：

效果图：

所以能看出background的范围是从border的外边缘围城的区域，也得出一个结论：border是在background上面。

2.下面我们试着想一下从右边看这个盒子是什么样的，谁在上面，谁在下面，下面我们代码验证一下

代码验证：

  
  
  


  

    我是内联元素                 
    
    
    
    
  

显示效果：

结论：内联元素高于浮动元素高于块级元素

用图片可以直观的看出一个盒模型中元素的高低关系

3.下面我们加入定位试试看

代码验证：

  
  
  


  

    我是内联元素                  
    
     
    
     
    
  
  

显示效果：

换绝对定位和固定定位效果同上，所以我们由得出一个结论：

除了静态定位（static），以上三种定位元素，都会处在其他元素之上。

4.最后验证一下定位元素加上z-index：

先正常排放，不用z-index

代码：

  
  
  


  
相对定位
  
绝对定位
  
固定定位

显示效果：

当元素都加定位且没有z-index时，它们的层叠顺序是按照HTML中元素的顺序排列的，即后面的元素要比前面的元素高一点。

加上z-index

代码验证：

  
  
  


  
相对定位
  
绝对定位
  
固定定位

显示效果：

相对定位元素（pink）z-index为3，绝对定位元素（skyblue）z-index为2，固定定位元素（orange）z-index为1

所以当设置了 z-index 属性之后，这三种定位为元素的高低就根据 z-index 的值变化，值越大，层级越高，越靠上。

5.上面已知定位元素高于文档中其他元素，那定位元素加上-z-index与文档中元素相比呢？

代码验证：

显示效果：

所以设置了z-index值为负数的定位元素，会处于块级元素之下。

2.所以这就是所说的层叠上下文

简单来说，就是比谁层级高，比谁父元素层级高

元素盒子放入层叠顺序上下文的顺序，从层叠的底部开始，共有七种层叠等级：

• 背景和边框：形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
• 负z-index值：层叠上下文内有着负z-index值的子元素。
• 块级盒：文档流中非行内非定位子元素。
• 浮动盒：非定位浮动元素。
• 行内盒：文档流中行内级别非定位子元素。
• z-index: 0：定位元素。 这些元素形成了新的层叠上下文。
• 正z-index值：定位元素。 层叠上下文中的最高等级。

文档根元素（）就是一个默认的层叠上下层

每一个层叠上下层就是一个小世界，只有在同一个小世界的z-index才可以相互比较。

文档中的层叠上下文由满足以下任意一个条件的元素形成：

• 文档根元素（）；
• position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
• position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
• flex (flexbox) 容器的子元素，且 z-index 值不为 auto；
• grid (grid) 容器的子元素，且 z-index 值不为 auto；
• opacity 属性值小于 1 的元素；
• 以下任意属性值不为 none 的元素：
  • transform
  • filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border

层叠上下文​developer.mozilla.org

负的z-index也在层叠上下层的小世界里，不会逃出这个小世界。

总结

对于学习CSS来说，阅读CSS的规范和理解相关的概念都是枯燥无味的。而且CSS不正交，当你改变其中一个属性时，另一个属性也会变化。所以理解一些概念会比较吃力。比如这篇文章中提到的相关概念： 文档流（Normal Flow）、、层叠上下文（Stacking Context）、层叠水平（Stacking Level） 和 层叠顺序（Stacking Order）。

虽然这些概念是CSS的基础，但很多同学都一直不愿去触碰，因为它们看起来简单，事实上还是较为复杂的。如查我们花一定的时间理解了这些概念，能帮助我们更好的理解CSS中其他相关的概念和知识点，特别是z-index的运用。