CSS按顺序排列图层

Question

下面的 Html 描述了我从旧网站转移的布局的更新版本，需要将表格中的图像转换为纯 CSS（或尽可能接近）。

 <div id="mainContainer">
    <div class="topnav">
      <a href="#about"><span class="LpTopLink">Link4</a>
      <a href="#contact"><span class="ETopLink">Link3</a>
      <a href="#news"><span class="YpTopLink">Link2</a>
      <a href="#home"><span class="HTopLink">Home</a>
    </div>
    <h1 class="titleA">Aspir...<span class="titleB">Fut...</span></h1>
<div id="videoBox">
  <p> <span class="welcome">Welcome...<span></p>
<p class="filmpar">
<a id="activator"><img src="images/Film-2.png" class="film"></a>
Lots of text to do with the project, over 4 or five lines, with an image and some decorative text links...</p>
<div id="activator2">
<div id="filmtxt"> link to film... </div>
</div>
</div>
</div>
<div id="page-wrapBody">
  <div class="div" id="one"></div>
  <div class="div" id="two"></div>
  <div class="div" id="three"></div>
</div>

底部的三个彩色盒子应该在（第 3 层）下面，但我似乎无法让它们滑到下面并坐在（第 3 层）上

以下是 CSS 链接；第一个用于 videoBox，第二个用于 wrapBody。 wrapBody 包含三个彩色框的详细信息。

#videoBox {
  font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
  float: right;
  display: block;
  border: solid 6px;
  border-color: white;
  border-radius: 25px;
  color: black;
  margin-top: -37;
  text-align: left;
  padding: 8px 26px;
  text-decoration: none;
  font-size: 17px;
  background: -webkit-linear-gradient(#f5991c, #f5be74);
  background-image: -ms-linear-gradient(#f5991c, #f5be74);
  box-shadow: 0 7px 6px #cac9c8;
  z-index:10;
}

wrapBody 和彩色盒子

#page-wrapBody
  {
    width: 800px;
    margin: 80px auto;
    padding: 20px;
    border-radius: 25px;
    background: white;
    -moz-box-shadow: 0 0 15px grey;
    -webkit-box-shadow: 0 0 20px black;
    box-shadow: 0 0 15px grey;
    z-index:2;
  }
  .div
    {
      display:inline-block;
      width:33%;
      height:100%;
      margin-top: -60px;
      z-index:3;
  }
  #one {
    background: -webkit-linear-gradient(#ddffcc, #fff);
    background-image: -ms-linear-gradient(#ddffcc, #fff);
  }
  #two {
    background: -webkit-linear-gradient(#ffccd4, #fff);
    background-image: -ms-linear-gradient(#ffccd4, #fff);
  }
  #three {
    background: -webkit-linear-gradient(#ccdeff, #fff);
    background-image: -ms-linear-gradient(#ccdeff, #fff);
  }

如果显示图像，它会显示此代码产生的内容，但我需要彩色框位于 videoBox (layer3) 下方并保留阴影效果。任何帮助表示赞赏！

Answer 1

要使用 z-index，您还需要使用 position 属性。

（强调我的）

z-index CSS 属性指定 定位元素 及其后代的 z 顺序。当元素重叠时，z-order 确定哪个元素覆盖另一个元素。 z-index 较大的元素通常会覆盖 z-index 较小的元素。

[...]

对于定位框（即具有除静态以外的任何位置），z-index 属性指定：

1. 框在当前堆叠上下文中的堆叠级别。
2. 框是否建立本地堆叠上下文。

_{z-index | MDN}

您需要进行的更改位于#videoBox。无论您在哪里使用z-index，都可以进行相同的更改。但从技术上讲，您只需要进行一次调整。

#videoBox {
  ...
  z-index:10;
  position: relative; // add this line
}

Here is a rough example

---

对您的代码的注释，您似乎在第 3-6 行有未关闭的 <span> 标记。如果你这样放，这可能会给你带来问题。