Overlapping box elements - html

Question

Please look at the image to understand what I am talking about. I have three box elements that look like what is displayed in the picture. What I want is for the green box to only be displayed overlapping the yellow and not displayed over overlapping the red. The green box needs to reside overlapping both but only visible over the yellow area. Ive tried using z-index, position and opacity in every different manner I could think of, but yet to come up with a solution.
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

It's impossible to have elements overlap one layer and then go underneath another layer like you are asking. I know there is some art term for this.
Anyways here is the closest solution is to just fake it and have the green box inside the yellow box:
.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>