div高於另一個div，但應該滾動到下一個

下面有一個div（即div_fixed），它固定在位。另一個div即other_content位於div_fixed之下。 other_content div有一個padding-top屬性，所以當頁面滾動時，只有other_content在固定div下滾動。div高於另一個div，但應該滾動到下一個

的小提琴是here

HTML：

<div class="div_fixed">FIXED</div> 
<div class="other_content"> 
    content goes here<br/> 
    content goes here<br/> 
    content goes here<br/> 
</div>

CSS：

 div { color: #fff } 
     .div_fixed { position: fixed; 
    width: 100%; 
    height: 100px; 


    } 

.other_content { 
background: #f00; 
height: 5000px; 
color: #fff; 
padding-top: 100px; 

margin:0 auto; 

}

但我想非固定股利留在固定的股利和希望非固定div在其上邊緣之下消失，即非固定div的上邊緣的位置將保持固定，但其內容將在頁面滾動上以消失的方式開始消失當它停留在固定格下時。

，所以我不得不在HTML中的小編輯（只有2斷裂）非固定的div之前：

<div class="div_fixed">FIXED</div> 
<br><br/> 
     <div class="other_content"> 
      content goes here<br/> 
      content goes here<br/> 
      content goes here<br/> 
     </div>

CSS中的加入量爲：

.fixed_div{ 

    z-index:-1; 
    } 

    .other_content{ 


    width:60%; 
    z-index:99099900; 


    }

不過的上邊緣非固定股不會停留在我想要的位置。

如何實現這一目標？

EDIT：

假設我添加背景圖像對於非固定div。固定的div的背景圖像的一部分可能會被另一個div滾動的z-index高於非固定的div？這個問題會以這種方式解決嗎？

EDIT2

讓用假設fixed_div是標題，other_content是一個網頁的內容身體。讓我們添加一個頁腳div，其ID爲footer。 other_content不應該出現滾動。當頁面滾動時，other_content應該滾動。

來源

2013-01-03 Istiaque Ahmed

我想這就是你要找的。您需要將固定格子放置在fixed時尚中，但第二個格子不需要特殊定位。只要給它一個margin-top:100px其中100px是固定格的高度。

的技巧是使用z-index和position:relative;添加到內容DIV

工作演示：http://jsfiddle.net/KyP8L/3/

.div_fixed{ 
    height:100px; 
    width:100%;  
    position:fixed; 
    top:0; 
    left:0; 
    background:#ff0; 
    z-index:500; 
} 
.other_content { 
    width:60%;  
    background:#0ff; 
    margin-top:100px; 
    z-index:600; 
    position:relative; 
}

來源

2013-01-03 11:25:20 Dutchie432

並使其什麼樣的變化？ 'other_content' div的寬度應該是60％。在那種情況下，非固定股利似乎並沒有停留在固定股利上？ –

它似乎對我來說：http://jsfiddle.net/KyP8L/2/ – Dutchie432

'other_content'應該保持在'fixed_div'之上。 jsfiddle沒有顯示。 –

一種選擇是用一個固定的位置來包裝內容的div在另一個容器。

例如：

HTML：

<div class="div_fixed">FIXED</div> 
<div class="fixed_container"> 
    <div class="other_content"> 
     content goes here<br/> 
     content goes here<br/> 
     content goes here<br/> 
    </div> 
</div>

CSS：

.fixed_container { 
    position: fixed; 
    overflow: auto; 
    top:30px; 
    width: 100%; 
    height: 5000px; 
    z-index:10; } 

.other_content { position: absolute; }

演示：http://jsfiddle.net/xmKMs/

來源

2013-01-03 11:36:49 DBPaul

那麼'other_content'上邊緣以預期的方式消失呢？ –

下面是一個例子：http://jsfiddle.net/49AjB/ 這就是你所期待的？ – DBPaul

爲什麼'padding-top：100px'代表'other_content'？ –

div高於另一個div，但應該滾動到下一個

回答

相關問題