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 属性。

（强调我的）

The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

[...]

For a positioned box (that is, one with any position other than static), the z-index property specifies:

The stack level of the box in the current stacking context.

Whether the box establishes a local stacking context.

_{z-index | MDN}

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

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

Here is a rough example

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

CSS 按顺序排列图层

CSS putting layers in order

css

layer