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

最新推荐文章于 2024-08-21 10:36:09 发布

weixin_39610956

最新推荐文章于 2024-08-21 10:36:09 发布

阅读量1.1w

点赞数 5

文章标签： css如何让两个div上下排列

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的内边缘围成的区域呢？

代码验证：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: pink;
      border: 10px solid rgba(255, 255, 255, 0.5);
    }
  </style>
</head>
<body>
  <div></div>
</body> 
</html>

效果图：

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

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

代码验证：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 5px solid pink;
    }
    .child {
      height: 20px;
      background: skyblue;
      margin-top: -14px;       /* 将块级元素向上移动14px */
    }
    .float {
      width: 50px;
      height: 50px;
      background: orange;
      float: left;             
      margin-top: -20px;       /* 将元素向上移动20px */
    }
  </style>
</head>
<body>
  <div class="parent">
    我是内联元素                 <!-- 内联元素 -->
    <div class="child"></div>    <!-- 块级元素 -->
    <div class="float"></div>    <!-- 浮动元素 -->
  </div>
</body>
</html>

显示效果：

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

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

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

代码验证：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 5px solid pink;
    }
    .child {
      height: 20px;
      background: skyblue;
      margin-top: -14px;       /* 将块级元素向上移动14px */
    }
    .float {
      width: 50px;
      height: 50px;
      background: orange;
      float: left;             
      margin-top: -20px;       /* 将元素向上移动20px */
    }
     .relative {
      width: 50px;
      height: 50px;
      background: orangered;
      position: relative;      /* 将元素相对定位 */
      left: 25px;
      top: -20px;
    }
  </style>
</head>
<body>
  <div class="parent">
    我是内联元素                  <!-- 内联元素 -->
    <div class="child"></div>     <!-- 块级元素 -->
    <div class="float"></div>     <!-- 浮动元素 -->
    <div class="relative"></div>  <!-- 定位元素 -->
  </div>
</body>
</html>

显示效果：

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

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

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

先正常排放，不用z-index

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 100px;
    }
    .relative {
      background: pink;
      position: relative;
    }
    .absolute {
      background: skyblue;
      position: absolute;
      left: 40px;
      top: 40px;
    }
    .fixed {
      background: orange;
      position: fixed;
      left: 80px;
      top: 80px;
    }
  </style>
</head>
<body>
  <div class="relative">相对定位</div>
  <div class="absolute">绝对定位</div>
  <div class="fixed">固定定位</div>
</body>
</html>

显示效果：

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

加上z-index

代码验证：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 100px;
    }
    .relative {
      background: pink;
      position: relative;
      z-index: 3;
    }
    .absolute {
      background: skyblue;
      position: absolute;
      left: 40px;
      top: 40px;
      z-index: 2;
    }
    .fixed {
      background: orange;
      position: fixed;
      left: 80px;
      top: 80px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="relative">相对定位</div>
  <div class="absolute">绝对定位</div>
  <div class="fixed">固定定位</div>
</body>
</html>

显示效果：

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

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

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

代码验证：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 10px solid pink;
      background: #ccc;
    }
    .child {
      width: 100px;
      height: 100px;
      background: skyblue;
      position: relative;
      left: 150px;
      top: 150px;
      z-index: -1;         /* 将z-index设置为-1 */
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

显示效果：

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

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

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

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

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

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

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

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

文档根元素（<html>）；
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的运用。