Naprawiono div pozycji wewnątrz pos: względne i przepełnienie-y: przewiń

Question

Chcę mieć div z ustaloną pozycją wewnątrz div z przepełnieniem -y: przewiń, co oznacza, że ​​chcę, aby div pozostał na miejscu, podczas gdy reszta treści przewija normalnie. I nie mogę zrozumieć, co jest nie tak, czy ktoś może pomóc? z góry dzięki ...

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

A oto 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

stałej pozycji elementów jest w stosunku do całego dokumentu oglądanej, co nie jest elementem dominującym. Jeśli chcesz, aby do pracy, że trzeba coś takiego:

CSS

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

HTML

<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> 

Tutaj stworzyłem fiddle dla Ciebie.

Answer 2

Po zastosowaniu position:fixed do elementu, umieszczasz go w stosunku do samego okna, a nie jego elementu nadrzędnego. Będziesz chciał użyć position:absolute, aby umieścić dziecko w stosunku do jego rodzica, o ile jego pozycja domyślna jest inna niż position:static.

Jak poprawnie zrobiłeś w twoim przykładzie, zastosuj position:relative do rodzica .foo, a następnie zastosuj position:absolute do dziecka .bar. Zwykle osiągnęłoby to pożądany efekt przyciągnięcia obiektu .bar do wierzchu elementu nadrzędnego, ale ponieważ występuje przepełnienie zawartości podrzędnej w div jednostki nadrzędnej, a także zawartość podrzędna musi być również przewinięta,,. Zobacz najlepszy przykład w my Fiddle here.

Aby to naprawić, owinąć zawartość chcesz, aby przewinąć w innym pojemniku z overflow-y:scroll i zdejmowanie overflow-y:scroll na .foo aby zapobiec .bar z przewijania.

Aby zobaczyć przykład pracy, który można dostosować, zobacz dolny przykład w my Fiddle here.