When loading the segments experiments clock goal target component in the sidebar, we see this error in the console:
<SegmentsExperimentsClickGoal /> requires that #content be a positioned element (ie. not position: "static")
I originally added that warning in the name of robustness because the target overlays use absolute positioning relative to the nearest positioned ancestor. Formerly, that was the "#wrapper" element, which has position "relative".
When the base was changed to "#content" instead, the warning started firing because that element has default (static) positioning, which is to say, it is no longer a positioned element. That means the overlays are still being positioned relative to the "#wrapper" element, even though the search for targetable elements is scoped to the "#content".
This happens to work because the location of the "#content" relative to the "#wrapper" is stable, but it is a fragile assumption. We should probably do one of the following:
- Add "position: relative" to the "#content" (careful: there may be other stuff around that is assuming the nearest positioned ancestor is the "#wrapper").
- Teach the component to use two selectors: one to define the ancestor for calculating positioning, and another to define where to search for targetable elements.
- Analyze all this and conclude that it is actually safe to remove the warning (basically, if we feel confident that we'll always emit a "#wrapper" element, and that it will always be "position: relative").