html - 如何让一个 HTML 元素位于另一个元素之上？

Question

我的网站有一个像这样的 css3 移动云背景。

• http://cssdeck.com/labs/animated-clouds-background-pure-css3
• http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

但是，云彩不断出现在文本之上，当它们悬停在上面时我看不到任何文本。有没有办法让这些元素出现在云端？

Answer 1

如果你的 HTML 结构是这样的:

<div id="sky-container">
  <div id="cloud-container">
    ...
  </div>
</div>
<div id="text-container">
  ...
</div>

恭喜，你已经大功告成了，你只需要正确定位它们(​​绝对定位)。文本应该已经出现在云层之上。如果您的 HTML 是这样的:

<div id="cloud-container">
  ...
</div>
<div class="background">
  <div class="background">
     <div class="text">
        ...
     </div>
  <div class="text">
    ...
  </div>
  ...
</div>

即如果你没有单一的背景，你仍然可以在背景和文字之间插入云彩。您只需要将背景与 HTML 中的文本分开即可。您可以使用 z-index 在文本和背景之间放置云朵:

.background{
  z-index:0;
}
#cloud-container{
  z-index:1;
}
.text{
  z-index:2;
}

由于默认的 z-index 为 0，如果您知道云容器将是页面上的最后一个元素(并且是获得 position:absolute 的元素) )，您可以将 CSS 简化为:

.text{
  z-index:1;
}

具有 z-index 的元素还需要将其 position 属性显式设置为 absolute、relative 或 已修复。