2017-02-10 115 views
0

我想gui在海报上。这两个要素必须有固定的位置。如果我将gui的位置设置为绝对但固定不起作用,它工作正常。z指数固定父母和孩子

#gui { 
 
    width: 250px; 
 
    height: 50px; 
 
    position: fixed; // If I change to absolute then it works. 
 
    background-color: green; 
 
} 
 

 
#poster { 
 
    width: 250px; 
 
    height: 250px; 
 
    position: fixed; 
 
    background-color: red; 
 
    z-index: -1; 
 
}
<div id='gui'> 
 
    <div id='poster'></div> 
 
</div>

https://jsfiddle.net/pfpj03f5/

为什么不是这方面的工作?在#gui上将z-index设置为正数也不起作用。

+0

你必须做的div独立否则它不会工作.. –

+0

可能重复http://stackoverflow.com/questions/12463658/parent-child-with-position-fixed-parent-overflowhidden-bug –

回答

2

因为海报是gui的一个子元素。

固定位置,使他们独立的父元素的反正,所以才动了海报的GUI和它的作品:

<div id='gui'></div> 
<div id='poster'></div> 

https://jsfiddle.net/eaaz8o2z/

相关问题