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

可能添加and div 和div会做你想做的事，因为我怀疑你需要一个在另一个后面position:absolute。如果它们需要一个接一个，那么也可以在蓝色和绿色上使用相对定位。#blue#greenposition: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;
    }