My understanding is once an element is positioned absolute (even with a negative position value), it will exist completely out of the normal content flow. But why does it still make the page scrollable? When you run the code snippet below, the horizontal scrollbar appears. I thought it shouldn't be there.
.relative {
position: relative;
background: pink;
}
.absolute {
position: absolute;
top: 0;
right: -100px;
width: 200px;
height: 100px;
background: rgba(0,0,0,.5);
}
<div class="relative">
Placeholder <div class="absolute"></div>
</div>
See Question&Answers more detail:os