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顺序决定哪一个覆盖另一个。具有较大z指数的元素通常覆盖具有较低z元素的元素。

[...]

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


当前堆叠上下文中框的堆栈级别。

框是否建立了本地堆叠上下文。

<子> z-index | MDN

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

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

Here is a rough example

对您的代码发表评论，您似乎在第3-6行显示了未公开的<span>标记。如果您这样做，这可能会导致您的问题。

CSS按顺序放置图层

1 个答案: