css - 将图像定位在另一个图像的后面答案

【问题标题】：css - Position image at back of another imagecss - 将图像定位在另一个图像的后面
【发布时间】：2013-03-21 00:50:09
【问题描述】：

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

要了解更多信息，请点击以下屏幕截图：

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

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

【问题讨论】：

你试过z索引吗
如果您希望元素相互叠加显示，您将需要z-index 和position 的帮助，而不是static
以科迪所说的为基础。尝试位置：相对； z-index:1;

标签： html image css position

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

在您的徽标上使用绝对定位并将滑块从标题中取出。页眉只有 54 像素高，无法容纳您的滑块。

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;
}

【讨论】：