Z-индекс в позиция, фиксирана под позицията на фиксиран елемент

Опитах се да задам z-index под body за някакъв елемент с позиция fixed

пример по-долу:

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

АКТУАЛИЗАЦИЯ

благодаря за цялата помощ: Fiddle е добавен тук

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

Сега изобщо искам дясно меню под - под горно меню, под тяло, възможно е.


html css z-index fixed
person Peter Jack    schedule 20.01.2015    source източник
comment
Необходима е по-пълна демонстрация. Нямате .fixed-menu във вашия HTML. Контекстът на позициониране се основава на най-близкия позициониран родителски елемент, така че ще трябва да го разгледате.   -  person ralph.m    schedule 21.01.2015
comment
Добавих Fiddle за вас, за да можете по-добре да илюстрирате проблема. Все още съм малко объркан какво искате да правите... Можете ли да поясните?   -  person Kyle Booth    schedule 21.01.2015
comment
какво е съдържанието на тялото ти? Умишлено ли се опитвате да добавите елемент с фиксирана позиция вътре в друг елемент с фиксирана позиция?   -  person scmccarthy22    schedule 21.01.2015
comment
Възможен дубликат на stackoverflow.com/ въпроси/5218927/   -  person 2C-B    schedule 21.01.2015

Отговори (1)


arrow_upward
0
arrow_downward

Да, възможно е, но ще трябва да промените своето 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, вместо дъщерния

person J. Bush    schedule 15.02.2016