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 中的文本分开即可。您可以使用 az-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或fixed。