Back to Blog
Overflow hidden with fixed5/29/2023 ![]() ![]() ![]() And, in the second approach, the four corner boxes are positioned relative to the inner content wrapper, which creates a more "intuitive" bounding box for the content.ĪSIDE: If you try the demo, you'll see that in the first approach the absolutely-positioned corner boxes scroll with the content. Now, when we run this code, we get the following output:Īs you can see, in the first approach, the four corner boxes are positioned relative to the overflow viewport. In the first approach, the relative position is applied to the "overflow" container and, in the second approach, it's being applied to the content wrapper. This allows theĪbsolutely positioned elements to anchor to the bounding box of the content,Īs you can see, the main difference between the two approach lies in where the "position: relative" style is applied. Onto a content wrapper (contained within the overflow area). Here, we're moving the position-anchoring off of the overflow container and Yay, content!Yay, content!Yay, content!Yay, content! Positioned elements to anchor to the actual viewport of the container. Here, the overflow container is, itself, acting as the anchor for the Using Position Absolute Inside A Scrolling Overflow Container
0 Comments
Read More
Leave a Reply. |