- Using Position Absolute Inside A Scrolling Overflow Container
- Enjoyed This Post? ❤️ Share the Love With Your Friends! ❤️
- You Might Also Enjoy Some of My Other Posts
- Reader Comments
- CSS Layout - The position Property
- The position Property
- position: static;
- Example
- position: relative;
- Example
- position: fixed;
- Example
- position: absolute;
- Example
- position: sticky;
- Example
- Positioning Text In an Image
Using Position Absolute Inside A Scrolling Overflow Container
CAUTION: This is primarily a «note to self».
The other week, I tried to use absolute positioning inside a container that had «overflow: auto» enabled. And, somewhat to my surprise, the absolutely-positioned elements were rendered relative to the overflow «viewport,» not to the «natural bounding box» of the content. This kind of threw me for a loop; and, it took me several days to come up with a solution. In retrospect, the solution is obvious. But, I had some weird mental block that was holding me back. All I had to do was wrap the content in non-overflow container and use said container as the anchor for positioning.
To see what I mean, I’ve created a small demo in which I use the two approaches side-by-side. In the first approach, I’m using the overflow container as the position anchor. Then, in the second approach, I’m wrapping the content in an extra container in order to provide a non-overflow position anchor:
Top Left Top Right Bottom Left Bottom Right Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
Yay, content!
With A Positioned Content Wrapper
Читайте также: Файл шаблона html файла