Sabit pozisyon div: bağıl & overflow-y: Ben taşma-y ile bir div içindeki sabit bir konumda olan bir div sahip olmak istiyorum

Question

ilerleyin: Ben ederken div yerde kalmak istiyorum, yani kaydırma içeriğinin kalanı normal olarak kaydırır. Ve kimseye yardımcı olabilir, yanlış anlamaya olamaz? şimdiden teşekkürler ... Burada

.foo { 
    position:relative; 
    display:block; 
    width:100%; 
    height:300px; 
    overflow-y:scroll; 
} 
.bar { 
    position:fixed; 
    top:0; 
    right:0; 
} 

Ve HTML

<div class="foo"> 
    <div class="bar"><div><!-- end of div that should be fixed --> 
    <div class="someOther">...</div> 
    <div class="someOther">...</div> 
    <div class="someOther">...</div> 
    <div class="someOther">...</div> 
</div><!-- end of container --> 

Answer 1

sabit elemanlar pozisyon görüntülediğiniz dosyanın tamamı ile ilişkilidir olduğunu, ana öğe değil her neyse. Eğer iş o istiyorsanız, böyle bir şey gerekir:

CSS

.foo { 
    height : 300px; 
    position : relative; 
    width : 100%; 
} 
.bar { 
    border-bottom : 1px solid #000; 
    height : 50px; 
} 
.scollable_content { 
    height : 250px; 
    overflow-y : auto; 
} 

HTML İşte

<div class="foo"> 
    <div class="bar"></div> 
    <div class="scrollable_content"> 
     <div class="someOther">...</div> 
     <div class="someOther">...</div> 
     <div class="someOther">...</div> 
     <div class="someOther">...</div> 
    </div> 
</div> 

, sana bir fiddle yarattı. Bir öğeye position:fixed uyguladığınızda

Answer 2

, değil onun ana öğe, pencerenin kendisinde ilgili olarak konumlandırarak edilmektedir. Sürece ebeveyn position:static, varsayılan konumundan başka bir konuma sahiptir olarak, kendi üst ilgili olarak bir çocuk konumlandırmak için position:absolute kullanmak isteyeceksiniz. Eğer doğru örnekte yaptığımız gibi

, ebeveyn .foo için position:relative uygulayabilir ve ardından çocuğun .bar için position:absolute geçerlidir. Normal olarak, bu, .bar'un ebeveynin üst kısmına yapışmasının arzu edilen sonucunu elde edecektir, ancak ana divanda bir alt-içerik olduğundan ve overflow-y:scroll tüm içeriği çocuk içeriğine kaydırdığı için, .bar da kaydırma yapmak zorundadır. En üstteki örneğe my Fiddle here'dan bakın.

, düzeltmek üzerinde overflow-y:scroll başka kapta ilerleyip kaydırma gelen .bar önlemek için .foo üzerine overflow-y:scroll kaldırmak istediğiniz içeriği sarmak için.

Eğer adapte my Fiddle here alt örnek görebilirsiniz çalışma örneğini görmek için.