Html 使用“不透明度”更改堆叠顺序_Html_Css

Html 使用“不透明度”更改堆叠顺序

html css

Html 使用“不透明度”更改堆叠顺序,html,css,Html,Css,有人能解释为什么不透明度会影响图像的堆叠吗 html元素 CSS代码的相关部分： div:first-child{ opacity: 0.99; } .red{ background: red; z-index: 1; } .green{ background: green; margin: 20px 0 0 20px; } .blue{ bac

有人能解释为什么不透明度会影响图像的堆叠吗 html元素

CSS代码的相关部分：

    div:first-child{
        opacity: 0.99;
    }
    .red{
        background: red;
        z-index: 1;
    }
    .green{
        background: green;
        margin: 20px 0 0 20px;
    }
    .blue{
        background: blue;
        margin: 40px 0 0 40px;
    }

纯HTML：

<div>
  <span class="red"></span>
</div>
<div>
  <span class="green"></span>
</div>
<div>
  <span class="blue"></span>
</div>

我正在学习z-index，它看起来很简单，直到我遇到这个异常，在添加不透明度后，它似乎对堆叠顺序没有影响。有人能解释不透明度在这个特定上下文中的意义吗？

请参阅代码片段2

为了使
```
z-index
```
具有任何用途，元素必须具有以下之一：
- ```
位置：绝对位置
```
- ```
位置：相对
```
- ```
位置：固定
```

```
opacity
```
在0到1的范围内工作，因此使用.99是无用的

s
```
inline
```
元素，并且不以任何可辨别的宽度或高度开始，因此为了实际看到任何背景，您需要为它们提供一些尺寸（即高度和宽度）或内容（即其中的文本）。如果指定
```
display:inline块
```
，它也会有所帮助，因为处理
```
display:inline
```
不是直观的

在代码片段1中，我添加了前面在代码中提到的内容

在代码片段2中，我制作了一个交互式演示，展示了

z-index

和

opacity

堆叠关系

片段1

div：第一个孩子{
不透明度：0.2；
}
瑞德先生{
位置：相对位置；
背景：红色；
z指数：1；
}
格林先生{
位置：相对位置；
背景：绿色；
利润率：20px 0 0 20px；
}
蓝先生{
位置：相对位置；
背景：蓝色；
利润率：40px 0 40px；
}
跨度{
显示：内联块；
宽度：100px；
高度：20px；
}

您的预期结果是什么？