Home >Web Front-end >HTML Tutorial >z-index Why is .box1 .inner not above .box2? _html/css_WEB-ITnose
z-index Why is .box1 .inner not above .box2? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:141020browse
Why is .box1 .inner not above .box2 in z-index?
Is there any article that explains z-index in detail, including test code?
<!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>
Reply to discussion (solution)
.inner position:absolute in this style does not work Function, change to position:absolute !important;
.box1{background-color:red;position:relative; z-index:2;}
because your box1 is under box2 And your inner is inside box1, so everything in box1 must be under box2. The only way is to make box1 z-index larger than box2 or to separate the inner. Otherwise, it’s very sad
In different stacking contexts, The display order of elements is determined by the stack level of the parent's stacking context.
So inner will use the level value of box1 when comparing with box2
You can refer to this article
http://www.blueidea.com/tech/web/2008/5975.asp