Bootstrap和CSS分层

Question

我正在使用bootstrap创建一个简单的HTML文件，出于某种原因，我似乎无法达到简单的分层效果。

期望的结果：

这些层由z-index标记如下：
1.身体 2.半透明橙色杆
3.内容：文字，徽标，图片

我正在使用的代码：

＆＃13;

＆＃13;

.container :first-child {
	background-color: white;
	position: relative;
	z-index: 1;
}
#orange_bar {
	height: 60px;
	left: 0;
    right: 0;
	background-color: #F8EBD2;
	position: absolute;
	z-index: 2;
}
#content {
	position: relative;
	z-index: 3;
}
#logo {
	margin-top: 30px;
	width: 100px;
}
#banner {
	width: 533px;
}
.inline {
	display: inline-block;
}
nav > ul > li > a {
	color: #d86213;
}
.list-inline {
	display: inline-block;
	margin: 40px 10px 0 0;
}
.list-inline li {
	float: right;
}

＆＃13;

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
<header>
<div class="container">
  <div id="orange_bar"></div>
   <div id="content">
	<div class="row">
	 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
	   <img src="http://a.deviantart.net/avatars/w/h/white-tiger-love.jpg?1" id="logo" class="inline pull-right" alt="logo">
	   <img src="http://i.imgur.com/PEbFLhe.png" id="banner" class="inline pull-right" alt="banner">
  <nav>
	 <ul class="list-inline pull-right">
	  <li><a href="">nav1</a></li>
	  <li><a href="">nav2</a></li>
	 </ul>
 </nav>
</div>
</div>
</div>
</div>
   </header>

＆＃13;

＆＃13;

＆＃13;

由于

Answer 1

首先，您需要为所有不同的图层将position属性设置为 property：absolute 。 接下来，您需要在更高的数字中设置 z-index 值，以便在各种浏览器上更有效。尝试以下CSS修改

.container :first-child {
background-color: white;
position: absolute;
z-index: -100;}

#orange_bar {
height: 60px;
left: 0;
right: 0;
background-color: #F8EBD2;
position: absolute;
z-index: 0;}

#content {
position: absolute;
z-index: 100;}

这应该有助于 z-index 的依赖关系生效，即使你的div的堆叠放在彼此内部也是如此。这应该照顾它。只需确保为z索引使用较大的整数，并在这种情况下使用 position：absolute 。