如何将图像添加到CSS弹出框中

Question

<div class="showUserInfo noPrint" id="showUserInfo">
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Login User: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;"><asp:Label ID="lblUserN" runat="server" ClientIDMode="Static" /></div>
    </div>
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Workgroups: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;">
            <ul class="ulO" id="ulO" runat="server">
            </ul>
        </div>
    </div>
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad" id="dvAdmin" runat="server">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Admin Status: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;"><asp:Image runat="server" ID="imgIsAdmin" ClientIDMode="Static" ImageUrl="~/theImages/admin_yes.png" CssClass="adminImg" /></div>
    </div>
</div>

CSS：

.showUserInfo {
    position: absolute;
    background: #243942;
    border: 4px solid #E55302;
    overflow: hidden;
    right: 45px;
    min-height: 100px;
    width: 350px;
    top: 55px;
    z-index: 200;
    text-align: left;
    padding: 10px;
    color: #C0C0C0;
    display: none;
}

输出：

我希望在左边角落添加一个图像，它在框外面看起来像这样：

我尝试将HTML更改为以下内容，但图片放在框内：

<div class="showUserInfo noPrint" id="showUserInfo">
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Login User: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;"><asp:Label ID="lblUserN" runat="server" ClientIDMode="Static" /></div>
    </div>
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Workgroups: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;">
            <ul class="ulO" id="ulO" runat="server">
            </ul>
        </div>
    </div>
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad" id="dvAdmin" runat="server">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Admin Status: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;"><asp:Image runat="server" ID="imgIsAdmin" ClientIDMode="Static" ImageUrl="~/theImages/admin_yes.png" CssClass="adminImg" /></div>
    </div>
    <img src="../theImages/preloader_small.gif" style="position: absolute; left: -22px; top: -22px;" />
</div>

Answer 1

您可以使用位置值和负位置来执行此操作。

See the jsfiddle

.box {
    position: relative;
}    

.image {
    position: absolute;
    top: -30px;
    left: -30px;
}

以上代码中示例的重要部分。 .box为position: relative; - 图片（当然可以是任何HTML元素）为position: absolute;，然后可以使用top定位绝对定位的元素，{{1 }}，left，right或bottom属性就在您想要的位置。如果其他内容覆盖它，您可能需要z-index以确保它位于顶部。

绝对位置始终将元素相对于DOM树上的下一个项目的坐标定位，其中位置设置为相对或绝对，这意味着无论内部z-index HTML如何，该位置都将保持设置变化。这些坐标默认为0x和0y。