![引导和CSS分层]( "引导和CSS分层")
本文介绍了引导和CSS分层的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用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分层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！