Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Preserve positioning context when changing position across breakpoints
Changing an element's position (e.g. relative→static) at a breakpoint reanchors absolutely-positioned descendants to a different ancestor; verify dropdown/overlay anchoring before altering the positioning context.
Bad example
| 1 | .menu { position: relative; } |
| 2 | @media (min-width: 450px) { |
| 3 | .menu { position: static; } /* dropdown was anchored to .menu */ |
| 4 | } |
| 5 | .menu .dropdown { position: absolute; top: 100%; } |
Explanation (EN)
On wide screens .menu becomes static, so the absolute .dropdown reanchors to the next positioned ancestor and shifts its position unexpectedly.
Objašnjenje (HR)
Na sirokim ekranima .menu postaje static, pa se apsolutni .dropdown ponovno usidri na sljedeceg pozicioniranog pretka i neocekivano pomakne.
Good example
| 1 | .menu { position: relative; } |
| 2 | /* keep .menu relative at all breakpoints so the dropdown stays anchored */ |
| 3 | .menu .dropdown { position: absolute; top: 100%; } |
Explanation (EN)
Keeping the ancestor relative across breakpoints preserves the anchoring context for the absolutely-positioned dropdown.
Objašnjenje (HR)
Zadrzavanje pretka kao relative kroz sve breakpointove cuva kontekst sidrenja za apsolutno pozicionirani dropdown.
Notes (EN)
If you must change position responsively, audit every absolutely/fixed-positioned descendant to confirm its anchor ancestor is intentional. Desktop-first responsive styles make these regressions easy to miss.
Bilješke (HR)
Ako bas moras mijenjati position responzivno, pregledaj svakog apsolutno/fixed pozicioniranog potomka da potvrdis da je njegov pretak za sidrenje namjeran. Desktop-first responzivni stilovi cine ovakve regresije lako previdljivima.