如何在不使用絕對定位的情況下在圖像上放置圖像？

Question

基本上，我有一個很好的導航按鈕.png從朋友和標題/ banner.jpg給我。我想將這些.png放在.jpg橫幅的頂部。問題是，我正在使用css翻轉功能（對於導航按鈕），需要我使用位置：相對於包含單獨導航按鈕的div。否則，翻轉功能在Opera中變得毛茸茸。我將如何能夠做到這一點？

下面是CSS的一些代碼（導航按鈕）：

.cssnavabout { background: url(navigation/about_on_over.png) no-repeat; white-space: nowrap; display: block; height: auto; width: auto; float: left; position:absolute; top: 55%; left: 50% } 
.cssnavabout a { display: block; color: #000000; width: auto; height: auto; display: block; float: left; color: black; text-decoration: none; } 
.cssnavabout img { width: auto; height: auto; display: inline; margin: 0px; border-style:none } 
.cssnavabout a:hover img { visibility:hidden } 

和HTML分區（導航按鈕）：

<div id="csswrapper"> 
<div class="cssnavabout"> 
<a href="about.html"><img src="navigation/about_on.png" width=100 height=50 /></a> 
</div> 

繼承人的CSS頁眉/旗幟：

#header { width: 1024px; height: 109px; position: relative; margin:0px; background-color:#FFFFFF; } 

和橫幅廣告的HTML：

<div id="header"> 
<img src="images/banner_about.jpg" width="100%" height="109" /> </div> 

我相信這很容易解決。對不起，這是我的第一個網站。

Answer 1

如何在不使用絕對定位的情況下在圖像上放置圖像？

是這樣的...

<div style="background: url(image.png) no-repeat"> 
    <img src="image2.png" alt="" /> 
</div> 

Answer 2

似乎是z索引的情況：http://www.w3schools.com/Css/pr_pos_z-index.asp

Answer 3

但你可以給絕對位置包含PNG按鈕，它應該做的錨訣竅。

#csswrapper a{ 
    position:absolute; 
    top:20px; //edit 
    right:20px; //as needed 
}