Clipping Scrollable Areas On The inline-start Side

When a web page is displayed from left to right by default, hanging elements on the right side of the page (for example, position: absolute; right: -100px; ) will trigger a horizontal scroll bar, scrolling enough to display the entire element. However, if you hang the element on the left side of the page, the element is hidden (the scrollbar is not triggered). In CSS terms, this is called "data loss" if you prefer a professional term. The same is true for the top (hidden) and bottom (scrolling occurs).

Ahmad pointed this out. This is just one of those features that need to be understood in CSS. I like Ahmad to describe this problem using logical directions such as inline-start directions (and block-start directions) because these directions change when the orientation of the page or when the writing pattern changes. If the page is displayed from right to left (RTL), the horizontal edge where data loss occurs is reversed (except Firefox?‍♀️).

The above is the detailed content of Clipping Scrollable Areas On The inline-start Side. For more information, please follow other related articles on the PHP Chinese website!