Question

我希望#blue div

下面的#green div

#blue div有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

可能在position:absolute和#blue div以及#green div上position:relative添加#red可以做你想要的，因为我怀疑你需要一个落后于另一个人。如果他们需要一个接一个，那么也要在蓝色和绿色上使用相对定位。

Answer 2

我看不出问题，你的代码很好。或者你的意思是在div下？就像隐藏在绿色div下面的蓝色div一样？那么你需要在你要移动/隐藏的div上添加position：relative（或absoulte）属性。然后是顶部或左边。例如：

        #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;
    }

如何使div低于另一个div

2 个答案: