Question

基本上，我有一个很好的导航按钮.png是从朋友和标题/ banner.jpg给我的。我想把这些.png放在.jpg横幅的顶部。问题是我正在使用css翻转功能（对于导航按钮）需要我使用position：relative来包含各个导航按钮的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-index的案例：http://www.w3schools.com/Css/pr_pos_z-index.asp

Answer 3

但是你可以给包含png按钮的锚点提供绝对位置，这个按钮应该可以解决问题。

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

如何在不使用绝对定位的情况下将图像放在图像上？

3 个答案: