A developer must understand how CSS properties affect element visibility. Incorrect sizing or positioning can hide parts of a user interface. Placing elements as siblings instead of children can lead to unintended content loss.
By Pawan Nayar · from the LLOS AI Learning record
A developer must understand how CSS properties affect element visibility.
Incorrect sizing or positioning can hide parts of a user interface. Placing elements as siblings instead of children can lead to unintended content loss.
A developer tried to fix a display issue. The developer wrapped two elements, `#status` and `#milestoneFooter`, in a new container called `.status-slot`. The `.status-slot` container was given a fixed height of 24 pixels. It also had `overflow:hidden` and `position:relative`. The `#status` element was set to `position:absolute` and `inset:0`. This made `#status` fill its parent. A special CSS rule made `#status` disappear when it was empty. The 24-pixel height of `.status-slot` was too small. It cut off a progress bar. The `#milestoneFooter` element became hidden. When the `#status` element was cleared, it removed its text. This also deleted the `#milestoneFooter` element because it was a sibling, not a child, of `#status`.
A developer creates a new container for a progress bar and a status message. The developer sets the container's height to 30 pixels. The progress bar is 40 pixels tall. The progress bar is cut off. The status message is also not visible. Later, the developer clears the status message. This action accidentally removes the progress bar too.
More from the same record, pulled by shared topic — not written new for this page.
Use `position: absolute` on the element. This takes the element out of the normal document flow.
A developer can set the parent element's CSS `position` to `relative`. This allows child elements with `position: absolute` to move within the parent.
The `.movie-section` is a main part of the page. It has a warm background color.
A developer uses `#interactive-svg-demo` for the main section that holds an SVG image. JavaScript code will interact with this section.
A developer must understand how CSS properties affect element visibility. Incorrect sizing or positioning can hide parts of a user interface. Placing elements as siblings instead of children can lead to unintended content loss.