css - 別のdivの下にdivを作成する方法

Question

#bluedivの下に#greendivが欲しい

#bluedivにはmargin-top : -10px; attribute

 <style>
    #red{
        width: 400px;

        border: 1px solid red;
    }
    #green{
        width: 100%;
        height: 100px;
        background-color: green;
        border-bottom: 2px solid yellow;
        z-index: 2;
    }
    #blue{
        width: 100%;
        height: 100px;
        background-color: blue;
        border-top: 2px solid brown;
        margin-top: -10px;
        z-index: 1;
    }
    </style>


<div id="red">
    <div id="green">
    </div>
    <div id="blue">
    </div>
</div>

Answer 1

おそらく、 と div と div を追加position:absoluteする#blueと#green、position:relative別#redの背後にある必要があると思われるため、必要なことが行われます。それらを次々と配置する必要がある場合は、青と緑にも相対的な配置を使用します。

Answer 2

問題がわかりません。コードは問題ありません。それとも、divの下を意味しましたか？緑の div の下に隠れている青い div のように？それでは、移動/非表示にする div に position: relative (または absoulte ) 属性を追加する必要があります。nad 次に上または左。例：

        #blue{
    /* without position: relative/absoulte the z-index wont work!*/
        position:relative;
/* this moves the dives up or down*/
        top: -100px;
/* this move the div left or right! */
left: 15px;
        width: 100%;
        height: 100px;
        background-color: blue;
        border-top: 2px solid brown;
        margin-top: -10px;
        z-index: 1;
    }