divはコンテナの外に移動することなく、他のすべてのものの上にどのように置くことができますか？

Question

コンテナdivにdiv Aが含まれています。他のいくつかの要素は、そのスタックの順序/コンテキストに基づいてdiv Bを含むことがあります。コンテナdivにフォーカスがあるときに、div Aが上になるようにします。

また、div Aはdiv B内に絶対配置されます。Div Bも絶対配置されます。 Div Bの外にdiv Aを移動すると、ポジショニングが失われます。

divの位置を維持してdiv Aを表示できますか？

私のフィドルはこちらです。 Div Aは黄色の四角です。私はに（あなたはdivのそれと呼ばれるが、スパンを）それはあなたが黄色の要素をしたい私は、理解し

<div class="master"> 
    <div> 
     <span class="red"> 
      Red 
      <span class="yellow">yellow</span> 
     </span> 
    </div> 
    <div> 
     <span class="green">Green</span> 
    </div> 
    <div> 
     <span class="blue">Blue</span> 
    </div> 
</div> 

.red, 
.green, 
.blue, 
.yellow { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    //opacity: 0.8; 
} 
.master { 
    //opacity: 0.9; 
    background: grey; 
    position: absolute; 
    border: 1px solid #000; 
    top: 50px; 
    width: 300px; 
    height: 300px; 
} 
.red { 
    background: red; 
    top: 25px; 
    left: 25px; 
    z-index: 1; 
} 
.yellow { 
    background: yellow; 
    top: 10px; 
    left: 20px; 
    width: 50px; 
    height: 50px; 
    z-index: 11; 
    //opacity: 1; 
} 
.green { 
    background: green; 
    top: 50px; 
    left: 50px; 
    z-index: 2; 
} 
.blue { 
    background: blue; 
    top: 75px; 
    left: 75px; 
    z-index: 3; 
} 

https://jsfiddle.net/ManaKultras/51hnd663/5/

Answer 1

（赤色）事業部BののZIndexを変更することなく、上に表示したいです他のすべての要素の上にある。 これを行うには、赤いdivからz-indexを削除する必要があります。

.red { 
    background: red; 
    top: 25px; 
    left: 25px; 

} 

は、ここではこれは本当に混乱して更新fiddle