Z-index in position fixed 在位置固定元素下答案

【问题标题】：Z-index in position fixed under position fixed elementZ-index in position fixed 在位置固定元素下
【发布时间】：2015-01-20 23:46:48
【问题描述】：

对于位置为fixed 的某些元素，我尝试将z-index 设置为body 之下

下面的例子：

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菜单显示顶部内容是可以的，所以fixed-right内容我需要显示在所有正文内容下，但它总是在顶部，为什么？

Fiddle

更新

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

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

现在我想要右边的菜单 - 在 top menu 下，在 body 下，这是可能的。

【问题讨论】：

需要更完整的演示。您的 HTML 中没有 .fixed-menu。定位上下文基于最近定位的父元素，因此您需要查看它。
我为您添加了一个 Fiddle，以便您更好地说明问题。仍然有点困惑你想要做什么......你能澄清一下吗？
你的正文内容是什么？您是否有意尝试在另一个固定位置元素中添加一个固定位置元素？
stackoverflow.com/questions/5218927/…的可能重复

标签： html css z-index fixed

【解决方案1】：

是的，这是可能的，但是您需要更改 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-right div 移动为 .fixed-top 的同级，而不是子级

【讨论】：