During my CSS exploration, I discovered a peculiar contrast between absolute and fixed positioning in CSS.
Essentially, when I apply absolute positioning to an element with content exceeding the height of the window or containing element, scroll bars appear. However, when I switch to fixed positioning, no scroll bars are displayed despite the excess content height.
To demonstrate this difference, I've created a test case:
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;
}
Here's the fiddle link for reference: fiddle. (Make sure to check the comment in the CSS)
I'm eager to learn more about this issue and would appreciate any insights or explanations.