I have created a simple popup div
(for offering auto-complete options), which I want positioned at the point in the text where it was created, but overlaying rather than displacing other content. So in CSS I have set, for this div
:
position: absolute;
z-index: 1;
This works exactly as I want except that the popup does not move when the other content that it overlays is scrolled. The definition for absolute
position (on W3Schools) says:
An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed) … However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
None of the other elements on my page have an position explicitly specified i.e. they all use the default (static
) position. So the second half of the above description sounds to me like absolute
is the right option for what I want. The only other position
options that work with z-index are: relative
, fixed
, sticky
– and none of them fixes the issue anyway.
What am I missing?
2
Answers
I eventually found the answer by trial-and-error. To make
position: absolute
work as described, I had to define one of its ancestors to have an explicitposition
(I usedrelative
). (This still seems at odds with the description forposition
that I quoted above).