asp.net - 无法使用 z-order 来显示一张图片在另一张图片之上

Question

我正在尝试做我认为将成为地球上最简单的事情。我有一些带有图形元素的 png 框，它应该覆盖我打算在此框内显示的图像的一部分(这是一个产品框，图形元素应该模拟价格标签)。

所以我需要这个框，我想使用 asp:ImageButton 在它下面显示图像。

我已经为此苦苦挣扎了几个小时，试图放置 div 和图像等。尝试了各种带有 z 顺序的东西，但没有成功，产品图像仍然显示在图形框上方。不过，就价格而言，它一直运行良好。

我认为这应该可行:

<div id="HPItemBox">
        <div id="HPItemPriceBox">
            <asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
        </div>
    <div id="imgBox" runat="server" class="HPimgBox">
        <asp:Image ID="ibImage" runat="server" Width="140" Height="140" style="position: relative; z-index: 10;" />
        <div id="HPItemLink">
            <asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
        </div>
    </div>
</div>

还试过:

<div id="HPItemBox">
    <div id="HPItemPriceBox">
        <asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
    </div>
    <div id="imgBox" runat="server" class="HPimgBox">
        <div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;
            z-index: 10;">
        </div>
        <div id="HPItemLink">
            <asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
        </div>
    </div>
</div>

有CSS:

#HPItemBox
{
    position: relative;
    width: 190px;
    height: 190px;
    background-image: url('../images/home-product-box.png');
    background-repeat: no-repeat;
    background-color: #ffffff;
    float: left;
    z-index: 50;
}

.HPItemPrice
{
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #4d4d4d;
}

.HPimgBox
{
    position: relative;
    top: -10px;
    right: 20px;
    width: 170px;
    z-index: 10;
}

有什么想法吗？提前致谢。

Answer 1

嘿，我认为你的代码有一些错误，请根据你的情况管理你的代码，并像这样对你的 css 文件进行一些更改

HTML

<div id="HPItemBox">
    <div id="HPItemPriceBox">
        <asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
    </div>
    <div id="imgBox" runat="server" class="HPimgBox">
        <div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;background:green;
            z-index: 10;">



                Hello



                <div id="HPItemLink">
            <asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
        </div>

        </div>

    </div>
</div>

CSS

#HPItemBox
{
    position: relative;
    width: 190px;
    height: 190px;
    background-image: url('../images/home-product-box.png');
    background-repeat: no-repeat;
    background-color:red;
    float: left;
    z-index: 50;
}

.HPItemPrice
{
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #4d4d4d;
     position: relative;
}

#HPItemLink
{
    position: absolute;
    bottom: 10px;
    left: 10px;

    z-index: 10;
    border:solid 2px yellow;
}

在此处查看现场演示 http://jsfiddle.net/8yg49/1/