absolute: When an element is set to "absolute," it is taken out of the flow of the document, allowing other elements to behave as if it doesn't exist while still being affected by other positional properties.
CSS-Tricks

This implies that the overall layout and position of other elements on the page will remain unchanged. While the page width may adjust, this adjustment does not impact the layout.

Page layout encompasses the organization and arrangement of visual elements on a page, often guided by principles of composition [...]
Wikipedia

In cases where the page width alters, the arrangement of elements stays consistent, keeping the layout unaffected. Although the width changes dynamically, this behavior is intentional. If you're wondering why, the following explanation may shed some light.

Regarding "why" inquiries: Sometimes there isn't a definitive explanation for why things are the way they are. It's about accepting the status quo or questioning it. This issue is minor compared to elements overflowing the window, which would be a more serious concern. Learn more about handling "why" questions. Not all "why" questions are unproductive, but in cases where a certain feature's existence is questioned, sometimes practical solutions outweigh abstract explanations.

Solution: To prevent the page from stretching when the width changes, apply overflow-x: hidden to the body's CSS. Alternatively, adding it to the .relative class will hide excess content from .absolute, given its larger height.

By incorporating overflow-x:hidden, any content outside the full-width body will be hidden, thereby maintaining the page's dimensions.

body {
  overflow-x:hidden;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  right: -100px;
  width: 200px;
  height: 100px;
  background: grey;
}

<div class="relative">
  <div class="absolute"></div>
</div>

To achieve the desired result, there are two methods you can use: either set body { overflow-x: hidden; }, or change the .absolute <div> to have a position:fixed.

Now, let's address your question.

Why does it still enable scrolling on the page?

This is because an element with position:absolute is positioned in relation to the nearest positioned ancestor.

A position:absolute <div> will cause the area to scroll if it overflows to the right or bottom.

Check out this Fiddle for a demonstration.

In contrast, an element with position:fixed is positioned relative to the viewport and will not overflow on any side. View this Fiddle to see it in action.

Here are some resources to help explain positioning: Mozilla Developer Network.

Absolute positioning: This will scroll, but is out of the page flow. It is typically moved from its original position.

Fixed positioning: This will NOT scroll, and is out of the normal flow. It is usually taken out of its original position.

For further information, refer to this Reference link.

body { 
  overflow-x: hidden; 
}

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

I hope this explanation clarifies things for you.

I have thoroughly reviewed the CSS 2.1 documentation (CSS3 has not altered the visual formatting sections), and this information is the most detailed that I could locate.

Section 2.3.1

In terms of all media types, the canvas refers to "the space where the formatting structure is displayed." The canvas extends infinitely in each dimension, but typically rendering occurs within a finite area of the canvas as determined by the user agent based on the target medium.

Section 9.1

For continuous media, user agents generally provide users with a viewport (such as a window or viewing area on the screen) to view a document.

If the viewport is smaller than the canvas area where the document is rendered, the user agent should offer a scrolling feature.

Therefore, when you insert an absolutely positioned element, although it does not alter the width of its containing block, it does expand the canvas size. This prompts the browser to implement a scrolling feature for accessing the entire canvas.

Just to clarify, the scrolling is not triggered because

<div class="relative">

When you set an element to be positioned absolutely, the size of its container will adjust based on its content, including the overflow.

To prevent the container from being hidden and eliminate the need for a scroll bar, it is recommended to remove the overflow property from the body tag.

body {
  overflow: hidden;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  right: -100px;
  width: 200px;
  height: 100px;
  background: grey;
}

<div class="relative">
  <div class="absolute"></div>
</div>

Your understanding is that once an element is positioned absolutely (even with a negative position value), it will be completely removed from the normal content flow.

You are correct, but take another look at it.

The phrase "it will completely out of the normal content flow" does not imply that it will be hidden if it moves outside of its container.

If you want it to be hidden outside the container, then the parent should have overflow: hidden set.

In your case, it caused the page to overflow because the default overflow property value is visible, which aligns with the W3C's guidelines.

W3C: https://www.w3.org/TR/css3-positioning/#abs-pos

In the absolute positioning model, a box is explicitly offset in relation to its containing block. It is completely removed from the normal flow (having no impact on later siblings). An absolutely positioned box creates a new containing block for children in the normal flow and descendants positioned absolutely (but not fixed or page). However, the contents of an absolutely positioned element do not wrap around other boxes. They may obstruct the contents of another box (or become obstructed themselves), depending on the stack levels of the overlapping boxes.

MDN: https://developer.mozilla.org/en/docs/Web/CSS/position

Elements positioned relatively are still part of the normal flow of elements in the document. Conversely, an element positioned absolutely is taken out of the flow and does not occupy any space when placing other elements. The absolutely positioned element is placed relative to the nearest positioned ancestor (non-static). If there is no positioned ancestor, the initial container is used.

Even if you make your .relative element have a fixed width and set overflow: hidden, a horizontal scroll bar will still appear.

See below:

.relative {
  position: relative;
  background: pink;
  width: 500px;
  overflow: auto;
}
.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>

If you want to control the overflow of a relatively positioned element, simply add the CSS property "overflow: hidden" and set the desired height. Many consider this method to be the most effective solution. You can also experiment with the positioning of absolutely positioned divs for added customization.

.relative {
  position: relative;
  background: pink;
  overflow:hidden;
}
.absolute {
  position: absolute;
  top: 0;
  right: -100px;
  width: 200px;
  height: 100px;
  background: rgba(0,0,0,.5);
}

Discussing the concept of a floating sidebar, I recently delved into this topic and discovered a straightforward solution that may prove beneficial, particularly if you are unable to access or prefer not to modify styles on the body element.

I thought it would be useful to share here, as it could potentially assist someone else.

Below is the SCSS code snippet:

$sidebar-width: 413px;

.right-sidebar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  height: 100%;
  width: $sidebar-width;
  overflow-x: hidden;

  transition: width 500ms;

  &.isHidden {
    width: 0;
  }

  .right-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: $sidebar-width;
  }
}

The key idea here is nesting one absolutely positioned element inside another with overflow-x: hidden and utilizing a transition based on width instead of the right coordinate to collapse the parent block. This sliding sidebar on the right side has proven to work effectively for my use case.