z-index不工作与固定定位

问题描述：

我有一个默认定位的 div （即 position：static ）和

I have a div with default positioning (i.e. position:static) and a div with a fixed position.

如果我设置了z-index的元素，似乎不可能使固定元素落在静态元素之后。

If I set the z-indexes of the elements, it seems impossible to make the fixed element go behind the static element.

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }

    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>

或在jsfiddle这里： http://jsfiddle.net/mhFxf/

Or on jsfiddle here: http://jsfiddle.net/mhFxf/

我可以通过在静态元素上使用
position：absolute
来解决这个问题，但任何人都可以告诉我为什么会发生这种情况？

I can work around this by using position:absolute on the static element, but can anyone tell me why this is happening?

（似乎有一个类似的问题，这个，（

(There seems to be a similar question to this one, (Fixed Positioning breaking z-index) but it dosen't have a satisfactory answer, hence I am asking this here with my example code)

答

添加 position：relative; 到#over

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }

    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>

小提琴

z-index不工作与固定定位

相关推荐