引导和CSS分层 [英] Bootstrap and CSS Layering

问题描述

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

希望的结果：



图层由z-index标记如下：

1.正文

2.半透明橙色栏

3.内容：文字，标志，图片

代码我使用的是：

  .container：first-child {background-color：white;位置：相对; 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;}  

 < link rel =stylesheethref =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?1id =logoclass =inline pull-rightalt =logo > < img src =http://i.imgur.com/PEbFLhe.pngid =bannerclass =inline pull-rightalt =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>  

感谢

$ b $首先，您需要将所有不同图层的位置属性设置为 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 这种情况。

I am creating a simple HTML file with bootstrap and I can't seem to reach a simple layering effect for some reason.

Desired result:

The layers are marked by z-index as follows:
1. body
2. half transparent orange bar
3. content: text, logo, image

Code I am using:

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

 

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

Thanks

解决方案

First of all you need to set your position property to property: absolute for all the different layers. Next you need to get set your z-index values in much higher numbers to be more effective over various browsers. Try the following CSS modifications

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

This should help the dependencies of the z-index take effect even though the stacking of your divs are placed inside each other. This should take care of it. Just make sure you're using larger integers for your z-indexes and use position:absolute for this case.

这篇关于引导和CSS分层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！