html - 重叠的盒子元素

Question

请看图片以了解我在说什么。我有三个看起来像图片中显示的框元素。我想要的是绿色框只显示在黄色上，不显示在红色上。绿色框需要与两者重叠但仅在黄色区域可见。我尝试以我能想到的各种不同方式使用 z-index、位置和不透明度，但尚未找到解决方案。

link to image

<div id="one" ></div>
<div id="two" >
</div><div id="three" ></div>


#one{
    border: solid 1px black;
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
}
#two{
    margin-left: 50px;
    border: solid 1px black;
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
}
#three{
    border: solid 1px black;
    width: 100px;
    height: 100px;
    background-color: green;
    position: relative;
}

Answer 1

不可能像您所要求的那样让元素重叠一层然后进入另一层之下。我知道这个有一些艺术术语。

无论如何，最接近的解决方案是伪造它并将绿色框放在黄色框内:

.outer {
  width: 300px;
  height: 300px;
  position: relative;
  outline: 1px solid black;
}

.green {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: -50px;
  outline: 1px solid black;
  background-color: green;
  z-index: 3;
}

.yellow {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  outline: 1px solid black;
  background-color: yellow;
  z-index: 2;
  overflow: hidden;
}

.red {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  outline: 1px solid black;
  background-color: red;
  z-index: 1;
}

<div class="outer">
  <div class="yellow">
    <div class="green"></div>       
  </div>
  <div class="red"></div>
</div>