фиксированное абсолютное позиционирование VS для прокрутки

Question

Я просто играл с некоторыми абсолютными и фиксированными свойствами CSS и сталкивался с необычной разницей между абсолютным и относительным позиционированием в CSS.

В принципе, когда я абсолютно позиционирую что-то, а содержимое больше, чем высота окна или содержащего элемент, появляется полоса прокрутки, но когда я изменяю позицию на фиксированную, хотя содержание больше по высоте по сравнению с в окне нет полос прокрутки.

Я создал тестовый случай для этого:

HTML:

<div class="page-container"> 
    <div class="helper"> 
     <div class="marker red"></div> 
     <div class="marker green"></div> 
     <div class="marker yellow"></div> 
     <div class="marker blue"></div> 
    </div> 
</div> 

CSS:

#slides-container { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 
.helper { 
    height: 400%; 
    width: 20px; 
    position: fixed; /* change this to absolute and the scrollbars appear*/ 
    top: 0; 
    left: 0; 
} 
.helper .marker { 
    height: 25%; 
    width: 100%; 
} 
.marker.red { 
    background: red; 
} 
.marker.green { 
    background: green; 
} 
.marker.yellow { 
    background: yellow; 
} 
.marker.blue { 
    background: blue; 
} 

и вот скрипку: fiddle. (отметьте комментарий в CSS)

Поблагодарили бы за разъяснения по этой проблеме.

Answer 1

Фиксированное позиционирование означает, что элемент зафиксирован в окне просмотра - на него не влияет прокрутка. Вы можете узнать больше здесь: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Поскольку ничто другое не дает высоту вашей странице, то все, что вы видите в этом случае, - это то, что часть фиксированного элемента соответствует вашему окну просмотра.

Посмотрите, что происходит, когда вы установите высоту контейнера в этой версии: http://jsfiddle.net/93ubza81/3/

.page-content{ 
height: 3000px; 
} 

Вы прокрутки, но фиксированный элемент не влияет.