将<div>放在另一个<div> CSS </div> </div>上

Question

我想做的是将两个图像按钮放在另一个图像按钮上，仅用于背景颜色。

例如：

如何将带有两个按钮的div放在背景上，就像附加的图像一样。

我的代码到目前为止：

CSS：

.behind
    {
        background-color: #e2e0de;
        width: 100%;
        height: 130px;
        z-index: -1;
    }

HTML：

   <div>
            <div class="behind">
            <asp:ImageButton ID="btnCheckin" runat="server" ImageUrl="~/image/button1.png"
                CssClass="checkinButton" />
            <asp:ImageButton ID="btnCheckout" runat="server" ImageUrl="~/image/button2.png"
                CssClass="checkoutButton divider" />
            </div>
        </div>

我的代码如下：

Answer 1

您的图片包含在behind div中，因此它们会从您背景的同一点开始。首先，将它们移出：

<div>
        <div class="behind"></div>
        <asp:ImageButton ID="btnCheckin" runat="server" ImageUrl="~/image/button1.png"
            CssClass="checkinButton" />
        <asp:ImageButton ID="btnCheckout" runat="server" ImageUrl="~/image/button2.png"
            CssClass="checkoutButton divider" />
</div>

其次，更新.behind css以从绝对位置开始（即不从顶部开始）。请注意position: absolute和top: 20px元素。 只需将20px替换为适合您的值，具体取决于图片的大小。

.behind {
    background-color: #e2e0de;
    width: 100%;
    height: 130px;
    z-index: -1;
    position: absolute;
    top: 20px;
}

Here is a working fiddle ，但我已使用其他图片，因此top:偏移的值不同。

Answer 2

试试这可能有助于（UNTESTED）：

.checkoutButton
    {
        position:relative;
        top:-value;
        z-index: 10;
    }

PS：如果按钮高度为value，则将136px更改为实例值，然后将其设为-3px - ＆gt; （（按钮height-divs height）/ 2）。

我希望它有帮助，并且抱歉我现在不能测试它