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

我想在正确的坐标上对齐大图像上的小图像。我相信这是非常简单的使用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应用程序图标。有人可以帮助我这样做。

来源

2014-09-02 Malaiselvan

你的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

来源

2014-09-02 20:59:09 Devin

在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

来源

2014-09-02 20:50:30 gibberish

我很感谢你的回答。但是有一个小问题。上部动态div的高度可能会有所不同。如果我将高度从50增加到200，那么绝对位置就成了问题。 – Malaiselvan 2014-09-02 20:59:22

是的，它会的。这就是为什么你需要外部股利。绝对定位“[将相对于具有相对（或绝对）定位的下一个父元素]（http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/）”* *我忘记了这一点：外部div（上例中的uberContainer）必须设置为'position：relative;'**。 [更多阅读]（http://css-tricks.com/absolute-positioning-inside-relative-positioning/） – gibberish 2014-09-02 23:08:23

另一个想法是从底部开始，向上移动 - 即使用相对定位 – gibberish 2014-09-02 23:09:17

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

回答

相关问题