將大圖像上的小圖像作爲絕對位置對齊

我想在正確的座標上對齊大圖像上的小圖像。我相信這是非常簡單的使用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

將大圖像上的小圖像作爲絕對位置對齊

回答

相關問題