A parent element must have a stacking context for its floating child elements to appear correctly. This prevents floating elements from being hidden behind sticky or fixed elements.
By Pawan Nayar · from the LLOS AI Learning record
A parent element must have a stacking context for its floating child elements to appear correctly.
This prevents floating elements from being hidden behind sticky or fixed elements.
Floating elements need a special stacking order. This order is called a stacking context. A parent element must create this context for its floating children. This is important when sticky or fixed elements are on the page. Without it, floating elements can get hidden behind other parts of the page.
A developer creates a webpage with a sticky navigation bar. The navigation bar has a `z-index` of 100. The developer adds a search box with an autocomplete dropdown. The search box is inside a section. If the section does not have its own `z-index` and `position: relative`, the autocomplete dropdown will appear behind the sticky navigation bar. The user cannot see the full dropdown.
More from the same record, pulled by shared topic — not written new for this page.
Buttons should only be as wide as the text they contain. Do not make buttons stretch to fill a space.
A developer should list all elements that will be inside the card. The developer must find the longest possible text for each element from real data.
A developer must add extra space to the bottom of the main content area. This space is called padding.
The template includes code for typography, such as using emojis as list bullets. It defines the structure for 'Pitfall Cards' and 'Memory Cards'.
A parent element must have a stacking context for its floating child elements to appear correctly. This prevents floating elements from being hidden behind sticky or fixed elements.