重疊的盒子元素

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>