A parent element with `position: relative` and `overflow: hidden` can contain two absolutely positioned child elements. One child can be an always-present background. The other child can be an overlay that hides when empty.
By Pawan Nayar · from the LLOS AI Learning record
A parent element with `position: relative` and `overflow: hidden` can contain two absolutely positioned child elements.
One child can be an always-present background. The other child can be an overlay that hides when empty.
A parent element needs `position: relative`, a fixed `height`, and `overflow: hidden`. The first child element should have `position: absolute` and `inset: 0`. This child is always visible. The second child element should also have `position: absolute` and `inset: 0`. It needs a `z-index` and a `background`. This child hides when it has no content. The developer updates text inside specific `<span>` elements within the second child. The developer does not change the `innerHTML` of the parent element.
A developer creates a status bar. The status bar shows a progress bar as a background. When a message appears, the message covers the progress bar. When the message disappears, the progress bar shows again.
More from the same record, pulled by shared topic — not written new for this page.
The system uses one main viewer file. This file is called `gold_viewer_shell.html`.
A card must never change its size. The content inside the card must fit the card.
Floating elements need a special stacking order. This order is called a stacking context.
An overlay pane needs to be positioned correctly. Use `position: fixed` in the CSS code.
A parent element with `position: relative` and `overflow: hidden` can contain two absolutely positioned child elements. One child can be an always-present background. The other child can be an overlay that hides when empty.