如何叠加元素

Question

尝试了每个可能的位置变化：相对/绝对/等和负边距后，我想知道是否有人可以告诉我如何让两个绿色条形图覆盖标题图像 - 在顶部和底部 - 在{{ 3}}

*请注意，由于WordPress的自定义图像标头处理响应的方式，主标头必须保留为img而不会成为后台属性。

非常感谢！

Answer 1

将两个条绝对放置在共同的祖先元素中。例如：

​<header>
    <nav><a href="#">Foobar</a></nav>
    <img src="http://placekitten.com/640/200" />
    <nav><a href="#">Foobar2</a></nav>
</header>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

使用以下CSS：

​header { 
    position: relative
}
nav:nth-of-type(1) { 
    top: 0
}
nav:nth-of-type(2) { 
    bottom: 0
}
nav {
    background-color: rgba(0,255,0,.25);
    box-sizing: border-box;
    position: absolute;
    width: 100%;
}

其中包含以下内容：http://jsfiddle.net/M3jyV/

Answer 2

试试这个css

 and make the inline css to external css its for your reference (inline css).

bootstrap.css line 5416

#masthead.container {
    padding: 0;
    position: relative;
    width: 1198px;
}


app.css line 13

#banner {
    position: absolute;
}

bootstrap.css line  3779

.navbar {
    color: #777777;
    overflow: visible;
    position: absolute;
    width: 100%;
}


<div class="container" style="width:100%">
<header style="margin-top: -40px;" class="navbar" role="banner">

见图片：

Answer 3

您可以使用CSS z-index属性

例如 - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

 DEMO - http://jsfiddle.net/xY5Re/75/