html/css 有图层吗以及如何使用不透明度?

Question

我在这里设计了一个网站，并介绍了一些这样的字母：

<div class="d">d</div>
<div class="e">e</div>
<div class="s">s</div>
<div class="i">i</div>
<div class="g">g</div>
<div class="n">n</div>

我给不透明的红色字母是这样的：

.e {font-size: 500px; position: relative; bottom: 650px; left: 
100px; color: red; opacity: 0.2}

现在d和e配合得很好。不透明的e与实心d重叠，因为它应该重叠。但是，当我希望不透明e与实心重叠s它不重叠时，s反而重叠了e。

这似乎是图层或 Lint 或 html 使用的任何单词的问题？

那么我如何将s移到后面e以便重叠呢？

Answer 1

你可以在这里使用z-indexCSS属性。较低的值(如z-index: 1(会将元素堆叠在具有较高值的元素下方，如z-index: 99。默认值为0。因此，请相应地为 CSS 类分配不同的z-index值。请记住，z轴定义了元素在彼此上方或下方的堆叠方式。

如果您希望e堆叠在s上方，e应该具有更高的z-index值。

使用示例值，这将起作用：

.e { z-index: 3; } .s { z-index: 2; }