Question

我正在尝试在正确的坐标上将大图像上的小图像对齐。我相信使用CSS非常简单，但我不能自己做。我为此创建了一个jsfiddle页面。

<div style='height:50px'>
    This div height is dynamic
</div>

<div class='imagecontainer'>
    <img src='http://jeema.org/mockimage.png' />
</div>

<div class='iconcontainer'>
    <img src='http://jeema.org/icon-48-mdpi.png' />
</div>

<p class='textcontainer'>Your Custom App</p>

CSS

.iconcontainer{
    position:absolute;
    z-index:1;
    border:1px solid red;
}
.textcontainer{
    position:absolute:
    color:#fffff;
    text-align:center;
    z-index:1;
}
.imagecontainer{
    position:absolute;
    border:1px solid red;
}

Fiddle

我想将小图片（phonegap图标）和文本放在下方空白处，就像Android应用程序图标一样。有人可以帮我这么做。

Answer 1

在position:absolute;下，您只需添加：

top: 450px;
left: 40px;

并更改数字，直到它处于正确的位置。

jsFiddle

请注意，您应该将两个容器放在一个公共容器中，否则您的绝对定位可能会有问题：

<div style='height:50px'>This div height is dynamic</div>
<div class="uberContainer">
    <div class='imagecontainer'>
        <img src='http://jeema.org/mockimage.png' />
    </div>
    <div class='iconcontainer'>
        <img src='http://jeema.org/icon-48-mdpi.png' />
    </div>
</div>
<p class='textcontainer'>Your Custom App</p>

revised jsFiddle

Answer 2

将您的HTML更改为：

<div style='height:50px'>This div height is dynamic</div>
<div class='imagecontainer'>
    <img src='http://jeema.org/mockimage.png' />
    <div class='iconcontainer'>
        <img src='http://jeema.org/icon-48-mdpi.png' />
    </div>
    <div class='textcontainer'>Your Custom App</div>
</div>

然后你的CSS：

.iconcontainer {
    position:absolute;
    z-index:1;
    border:1px solid red;
    position:absolute: top:0;
    left:0;
}
.textcontainer {
    position:absolute;
    color:#ffffff;
    text-align:center;
    z-index:100;
    top:20px;
    right:20px;
    height:30px;
    width:auto;
}
.imagecontainer {
    position:relative;
    border:1px solid red;
    width:320px;
    height:620px;
    z-index:-1;
}
.imagecontainer img {
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}

<强>解释您需要使用position:relative元素才能在顶部放置绝对定位元素。 See fiddle here

将大图像上的小图像对齐为绝对位置

2 个答案: