Question

我正在尝试将div元素放置在图像的右下角，即在容器元素内。我设置相对于容器的位置，并将绝对位置设置为内部div，但它不起作用。这是（http://jsfiddle.net/ZC84G/）。请帮忙。

<div class="container">
   <div class="icon"></div>
   <img src="/images/someImage.png" />
</div>

CSS：

body {
    background-color: black;
}
.container {
    position: relative;
}
.container img {
    max-width: 75%;
    max-height: 80%;
}

.icon{
    background-image: url('http://icons.iconarchive.com/icons/iconfactory/star-wars-lego/32/Biggs-No-Helmet-icon.png');
    width: 31px;
    height: 31px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

Answer 1

您的容器div未设置width和height。由于默认情况下<div>是block-level元素，因此它将设置为100%宽度，即扩展到剩余的水平空间。

另外，您还会限制图像尺寸：

max-width: 75%;
max-height: 80%;

如果您将img CSS 替换为：

max-width: 75%;
max-height: 80%;

它工作正常，正如所料：http://jsfiddle.net/ZC84G/3/

Answer 2

这是因为默认情况下div具有阻止显示模式，并且它的宽度是父容器的100％。尝试将 display：inline 添加到 .container

.container {
    position: relative;
    display: inline;
}

以下是更正过的jsfiddle：http://jsfiddle.net/ZC84G/4/

Answer 3

我已经在图像上修改了你的CSS。

基本上，我将它设置为适当缩放到其容器的大小，现在它位于我认为你想要它的位置。您将来可以自己找到这种方法的方法是通过在浏览器中右键单击来检查元素，并查看不同元素的大小，以查看扩展范围更大/更小的内容。

.container img {
    max-width: 100%;
    height: auto;
}

将div标签放在图像的右下角

3 个答案: