Question

在下面的HTML中，我希望小删除图标出现在其容器的左上角（div）。较大的图像（猫）需要在div和scale内部，以便它不超过div的高度。我需要div向左浮动，因为它在其他地方的使用方式。删除图标假设覆盖在较大图像的顶部（如果较大的图像填充div的宽度）。请注意，较大的图像实际上可能具有远小于div的宽度，并且它在div中居中。在这种情况下，删除图标仍位于左上角，但实际上并未覆盖在较大图像的顶部，因为较大的图像太小。无论较大图像的宽度如何，div的宽度始终保持不变。

这是我的HTML：

<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
    <img src="http://hellopune.mobi/site2/Images/icon_delete.png" />
    <img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>

在小提琴手中： http://jsfiddle.net/AndroidDev/eJZ7X/

Answer 1

你需要这样的东西吗？

Demo

div {
    position: relative;
}

div img {
    max-width: 100%;
    max-height: 100%;
}

div img:first-of-type {
    position: absolute;
    top: 5px;
    right: 5px;
}

在这里，如果您想要img，请将删除 absolute定位到top right和left属性您也可以这样做，并确保将它们包装在position: relative;容器中。

注意：我使用first-of-type伪，因此您无需更改 DOM，但如果您认为img的顺序可能会改变最好将class分配给删除 img。

当你觉得我的选择器过于通用时，假设你有一个名为class .img_holder的父级，这将div嵌套进一步嵌套img嵌套.img_holder > div { position: relative; } .img_holder > div > img { max-width: 100%; max-height: 100%; } .img_holder > div > img:first-of-type { position: absolute; top: 5px; right: 5px; }在内部，所以你的选择器将是

<div class="img_holder">
    <div>
        <img src="#" />
        <img src="#" />
    </div>
    <div>
        <img src="#" />
        <img src="#" />
    </div>
    <div>
        <img src="#" />
        <img src="#" />
    </div>
</div>

DOM看起来像

{{1}}

Answer 2

我已更新你的小提琴here

图标img现在有一个图标类，并且绝对位于div中。

HTML：

<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
    <img class="icon" src="http://hellopune.mobi/site2/Images/icon_delete.png" />
    <img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>

的CSS：

.icon {
    position: absolute;
}

将图像叠加在另一个图像上

2 个答案: