Z-指数下位置固定元件

固定位置I试图设置z-index到body下对一些元件与位置fixedZ-指数下位置固定元件

例如下面：

HTML

<body> 
    <div class="fixed-top"> 
      <ul> 
      menu content .... 
      </ul> 
      <div class="fixed-right"> 
      <ul> 
       menu content ..... 
      </ul> 
      </div> 
    </div> 
    <div class="main-content"> 
      </div> 
    </body>

CSS

.fixed-top{ 
    position:fixed; 
    z-index: 1030; 
    top: 0; 
    left: 0; 
    background: red; 
    height: 80px; 
    width: 100%; 
    } 
.fixed-right{ 
position: fixed; 
z-index: -1; 
background: green; 
width: 280px; 
right: 0; 
left: auto; 
top: 0; 
bottom: 0; 
}

对于fixed-top菜单显示内容顶部是OK，所以fixed-right内容我需要在所有主体内容下显示，但它总是在顶部，为什么？

Fiddle

UPDATE

感谢所有帮助：小提琴这里添加

http://jsfiddle.net/jimmyphong/0dsx3b29/

现在我想下都正确的菜单 - 在顶部的菜单中，身下，有可能的。

来源

2015-01-20 Peter Jack

需要更全面的演示。你的HTML中没有'.fixed-menu'。定位上下文基于最近定位的父元素，因此您需要查看该元素。 – 2015-01-21 00:01:26

我为您添加了小提琴，以便您更好地说明问题。仍然有点困惑，你想要做什么虽然...你能澄清？ – 2015-01-21 00:47:52

你的身体内容是什么？你有意试图在另一个固定位置元素内添加一个固定的定位元素吗？ – scmccarthy22 2015-01-21 00:51:29

是的，但是你需要改变你的DOM树。

.fixed-top{ 
 
    position:fixed; 
 
    z-index: 1030; 
 
    top: 0; 
 
    left: 0; 
 
    background: red; 
 
    height: 80px; 
 
    width: 100%; 
 
    } 
 
.fixed-right{ 
 
position: fixed; 
 
z-index: -1; 
 
background: green; 
 
width: 280px; 
 
right: 0; 
 
left: auto; 
 
top: 0; 
 
bottom: 0; 
 
} 
 
.main-content{ 
 
    z-index: 0; 
 
    background: #fff; 
 
    position: relative; 
 
}

<body> 
 
    <div class="fixed-top"> 
 
    <ul> 
 
     menu content .... 
 
    </ul> 
 
    </div> 
 
    <div class="fixed-right"> 
 
    <ul> 
 
     menu content ..... 
 
    </ul> 
 
    </div> 
 
    <div class="main-content"> 
 
    
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non facilisis turpis. Aliquam metus neque, interdum a felis sit amet, vehicula convallis augue. Suspendisse consequat, est quis hendrerit vehicula, nisl nulla consectetur erat, et auctor sem mi ac velit. Quisque cursus diam id est dapibus commodo. Pellentesque ultrices pretium nisi, in lacinia leo convallis et. Cras eu vestibulum turpis, non auctor quam. In ac mi placerat, eleifend quam nec, iaculis urna. Vestibulum pharetra sit amet metus nec pretium. Praesent et ante mauris. Quisque condimentum ante in elit mattis, et venenatis massa cursus. Fusce vitae nisl volutpat, tempor risus eu, facilisis quam. Mauris vitae condimentum lacus. Duis eget dolor in magna vestibulum vehicula.</p> 
 
<p>Sed pulvinar, massa et sagittis dignissim, lacus lacus finibus eros, sed dictum velit est a lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque semper eros vel sapien hendrerit, eu suscipit orci feugiat. Suspendisse aliquam lorem at molestie facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sit amet sollicitudin urna. Praesent ullamcorper nibh ut semper pellentesque. Morbi quis dapibus lorem. Pellentesque pulvinar felis in ipsum mollis tristique. Fusce pellentesque tortor sit amet dolor euismod, et posuere nisl cursus. Donec eget pharetra tortor. Quisque massa enim, tincidunt ac ex et, condimentum imperdiet arcu. Etiam suscipit dolor lorem, nec pharetra est lacinia vitae.</p> 
 
<p>Donec varius nulla ac convallis eleifend. Quisque sit amet leo sodales, varius lacus quis, mattis nisl. Cras nisl leo, maximus eget scelerisque at, dignissim eu ex. Nulla dignissim convallis diam molestie finibus. Quisque volutpat faucibus pulvinar. Sed posuere tortor iaculis aliquet elementum. Fusce dignissim ornare lectus, ac dignissim dui consectetur non. Proin id sollicitudin lorem. Maecenas augue sem, semper non condimentum sed, finibus eu sapien.</p> 
 
<p>Sed ac cursus sem, quis facilisis justo. Vestibulum laoreet gravida risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi pellentesque commodo diam ut semper. Nam quam mauris, rhoncus vitae purus nec, consectetur tincidunt libero. Maecenas sollicitudin, diam id gravida elementum, odio purus dapibus quam, lobortis semper mauris est mollis enim. Vestibulum quis ante pulvinar, hendrerit est et, posuere dui. Integer quis semper elit, a sodales nunc. Nam eget tincidunt dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a mi aliquet, vestibulum velit sit amet, sodales urna.</p> 
 
<p>Nulla pulvinar libero ligula, in placerat orci rhoncus vitae. Nunc rhoncus arcu sed magna ullamcorper, ac euismod felis tempus. Nunc molestie tempor magna, id rhoncus lorem feugiat non. Mauris efficitur justo felis, a consectetur magna posuere nec. Maecenas hendrerit eros egestas nibh sodales rutrum. Mauris ligula urna, semper non bibendum ac, volutpat ac magna. Etiam blandit, dolor et malesuada pretium, magna sem tristique diam, nec pharetra ante metus aliquam libero. Pellentesque vel orci nec tellus sagittis accumsan. Nulla facilisi. Nunc tempor pulvinar nulla id aliquam. Maecenas pharetra, leo id bibendum finibus, justo erat vulputate diam, at feugiat quam erat ut leo. Quisque risus leo, dapibus et nunc a, consectetur mollis elit. In et vehicula quam, ut suscipit odio. Sed nec ornare ipsum. Aenean semper ante in eros rhoncus fermentum. Fusce congue felis nunc, sed bibendum elit pellentesque vitae.</p> 
 

 
    </div> 
 
</body>

只需推动.fixed右格是.fixed顶的兄弟姐妹，而不是孩子

来源

2016-02-15 19:07:22

Z-指数下位置固定元件

回答

相关问题