Finding an Element’s Nearest Relative Positioned Ancestor

1 · · Feb. 9, 2021, midnight
This article was updated on 15 March 2021. Have you ever been faced with a CSS positioning dilemma where an element with position: absolute isn’t being positioned as you’d expect? Setting absolute positioning on an element will position it in relation to its nearest ancestor that has its position set to something other than static (the default). In the above image, the absolute-positioned element is positioned with the same CSS in both examples: .absolute { position: absolute; top: 100%; l...