A developer must not use `overflow:hidden` on a container element. This CSS property can stop animations from working. It can also hide parts of elements that use `position:absolute`.
By Pawan Nayar · from the LLOS AI Learning record
A developer must not use `overflow:hidden` on a container element.
This CSS property can stop animations from working. It can also hide parts of elements that use `position:absolute`.
The `overflow:hidden` property tells a web browser to hide content that goes outside an element's box. This can cause problems for animations. Parts of an animation might disappear. Elements positioned with `position:absolute` can also be cut off. A developer should use `overflow:hidden` only when it is truly needed.
A developer creates a website with a special animation. The animation makes an image slide out of a box. The developer adds `overflow:hidden` to the box's container. When the animation plays, the image disappears as soon as it leaves the box. The user cannot see the full animation.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
The difference between desktop and mobile views should be handled by CSS, not by having separate files. Desktop rules go inside `@media (min-width:901px)`.
A developer should reset the scroll position of a reusable panel or modal. This action must happen before the panel or modal displays new content.
A developer can set the parent element's CSS `position` to `relative`. This allows child elements with `position: absolute` to move within the parent.
A developer must update the JavaScript code that sets the pane's 'top' style. When a pane switches from 'position:fixed' to 'position:absolute', the 'top' value should be reset.
A developer must not use `overflow:hidden` on a container element. This CSS property can stop animations from working. It can also hide parts of elements that use `position:absolute`.