Fixed absolute positioning VS for scrolling

Question

I just played with some absolute and fixed CSS properties and came across an unusual difference between absolute and relative positioning in CSS.

Basically, when I absolutely position something, and the content is greater than the height of the window or containing the element, a scroll bar appears, but when I change the position to fixed, although the content is higher in height compared to the window, the scroll bars are not displayed.

I created a test case for this:

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

and here is the fiddle: fiddle . (mark the comment in CSS)

Thank you for clarifying this issue.

Answer 1

, - . : https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

, , , - , .

, , : http://jsfiddle.net/93ubza81/3/

.page-content{
height: 3000px;
}

, .