z-index为什么.box1 .inner不在.box2之上?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:11:14
Original
971 Leute haben es durchsucht

z-index为什么.box1 .inner不在.box2之上?
有没有关于z-index详细讲解的文章,包括测试代码的。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>page title</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body>	<style type="text/css">		.box1,.box2,.box3,.inner{width:200px;height:200px;}		.box1{background-color:red;position:relative;z-index:1;}		.box2{background-color:green;position:relative;z-index:1;top:-30px;left:50px;}		.box3{background-color:tan;}		.inner{background-color:#3A80F3;position:absolute; left:20px;top:20px;z-index:1000;}	</style>	<div class="box1">		box1 z-index:1;		<div class="inner">box1 inner z-index:1000</div>	</div>	<div class="box2">box2 z-index:1</div>	<div class="box3"></div></body></html>
Nach dem Login kopieren


回复讨论(解决方案)

.inner 这个样式里的 position:absolute 没有起作用,改为 position:absolute !important;

.box1{background-color:red;position:relative; z-index:2;}

因为你的box1在box2之下 而且你的inner在box1里面的 所以box1的所有东西肯定在box2下面了,只有让box1  z-index大与box2了  或者把inner脱离出来 否者 哎 悲催了

不同stacking context中,元素显示顺序以父级的stacking context的stack level来决定显示的先后情况。
所以inner在与box2比较时会用box1的level值
你可以参考这篇文章
http://www.blueidea.com/tech/web/2008/5975.asp

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage