もう1つ上にdivを1つ上げます

Question

私は2つのhtmlのdivを持っています。

<div style="height:100px;width:100px;position:fixed;left:0;top:0;background-color:red;" id="1"> 
<div style="height:200px;width:200px;position:fixed;left:0;top:0;background-color:yellow;" id="2"> 
</div> 
</div> 

これら2つのdivは、同じ場所に配置されています。したがって、最初のdivよりも2番目のdivが発生します。私は最初にdivを2番目に上げたい。

私はこのような他に2 div 1の位置を変更することでそれを行うことができます。

<div style="height:200px;width:200px;position:fixed;left:0;top:0;background-color:yellow;" id="1"> 

<div style="height:100px;width:100px;position:fixed;left:0;top:0;background-color:red;" id="2"> 
    </div> 
    </div> 

しかし、私はそれを行うことはできません。私は＃1の＃2兄弟を作りたいので。 ＃1と＃2の位置を変更せずに行う方法は？

Answer 1

あなたは黄色のものを赤の子として置くことができます。その場合、赤（親）を子の前に置く方法はありません。

私がやったことは、divの両方を兄弟にすることです。このようにして、z-indexプロパティを制御して、その1つを前面に表示させることができます。

<div style="height:100px;width:100px;position:fixed;left:0;top:0;background-color:red; z-index:10;" id="1"></div> 
 
<div style="height:200px;width:200px;position:fixed;left:0;top:0;background-color:yellow;z-index:0;" id="2"> 
 
</div>