位置固定元素下方的位置中的Z索引

Question

我試圖將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內容，但是它始終位於頂部，為什么？

小提琴

UPDATE

感謝所有幫助：Fiddle在這里添加

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

現在我要在所有菜單下-頂部菜單下，正文下，都可以。

Answer 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的兄弟，而不是子級

位置固定元素下方的位置中的Z索引

問題描述

1 個解決方案

解決方案1
0 2016-02-15 19:07:22

位置固定元素下方的位置中的Z索引

問題描述

1 個解決方案

解決方案1 0 2016-02-15 19:07:22

解決方案1
0 2016-02-15 19:07:22