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-指數下位置固定元件

回答

相關問題