0

我的主页上有一个标志，我在它的右侧有一个大图像，我想做的是图像应该出现在标志的后面。

如需更多信息，请查看屏幕截图： 在此处输入图像描述

大图是其中包含许多不同图像的图像，徽标是红色图像。

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

4

3 回答 3

1

#slider{ position: absolute; left:47px; top: 54px; z-index: -1; } 只是把它放在一起，但不确定它是否正是你想要的。http://jsfiddle.net/TKDQM/6/

于 2013-03-20T16:48:42.887 回答
0

尝试添加position: absolute到您的徽标图像。这会将其从页面流中删除，结果另一个图像被拉起。在你的小提琴中看到它：

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

于 2013-03-20T16:48:53.597 回答
0

在您的徽标上使用绝对定位并将滑块从标题中取出。标题只有 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;
}
于 2013-03-20T16:50:09.237 回答