css - 将图像定位在另一个图像的背面

Question

我的主页面上有一个徽标，右侧有一个大图像，我想要的是图像应该在徽标后面。

这里有更多的清关是屏幕截图：

大图像是里面有许多不同图像的图像，徽标是红色图像。

HTML代码：

<div id="header">
    <img src="http://livedemo00.template-help.com/wordpress_43791/wp-content/themes/theme2033/images/logo.png" width="170" height="240" alt="LOGO" id="logo" />
    <div id="slider">
        <img src="http://livedemo00.template-help.com/wordpress_43791/wp-content/uploads/2011/07/testi1.jpg" width="800" height="328" alt="Welcome to Our Site!" />
    </div>
</div>

CSS代码：

html, body {
    background-color: rgb(48, 48, 48);
    padding:0;
    margin:0;
}
/******HEADER******/
 #header {
    background-color: rgb(64, 64, 64);
    height: 54px;
}
/******LOGO******/
 #logo {
    float:left;
    margin-left: 47px;
}
/******NAV MENU******/
 #nav {
    list-style: none;
    margin-top: 0px;
}
#nav li {
    display:inline;
}

以下是jsFiddle

Answer 1

#slider{ position: absolute; left:47px; top: 54px; z-index: -1; } 把它扔在一起，不确定它是不是你正在寻找的东西。 http://jsfiddle.net/TKDQM/6/

Answer 2

尝试将position: absolute添加到徽标图片中。这会将其从页面流中移除，因此其他图像会被拉起。在你的小提琴中看到它：

http://jsfiddle.net/joplomacedo/TKDQM/9/

Answer 3

在徽标上使用绝对定位，并从标题中取出滑块。标题只有54px高，不能容纳你的滑块。

http://jsfiddle.net/TKDQM/8/

<强> HTML

<div id="header">
    <img src="http://livedemo00.template-help.com/wordpress_43791/wp-content/themes/theme2033/images/logo.png" width="170" height="240" alt="LOGO" id="logo" />
</div>
<div id="slider">
    <img src="http://livedemo00.template-help.com/wordpress_43791/wp-content/uploads/2011/07/testi1.jpg" width="800" height="328" alt="Welcome to Our Site!" />
</div>

<强> CSS

html, body {
    background-color: rgb(48, 48, 48);
    padding:0;
    margin:0;
}
/******HEADER******/
 #header {
    background-color: rgb(64, 64, 64);
    height: 54px;
    position: relative;
}
/******LOGO******/
 #logo {
   position: absolute;
    margin-left: 47px;
}
/******NAV MENU******/
 #nav {
    list-style: none;
    margin-top: 0px;
}
#nav li {
    display:inline;
}