本文介绍了引导和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分层的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 09:44