CSS: Overriding the Parent’s Overflow Hidden

UPDATE (25/10/2023): Since creating this post, overflow: clip was created. It allows children elements to be visible past the parent's borders but, and here is the catch, only in a single axis. You can check a code example here.

I've decided to keep this post up, because clip doesn't solve all problems raised here and still doesn't have great browser support just yet.

Use case: Rather obvious, you want a specific element to pop out and ignore the parent element’s overflow: hidden.

Case 1: Parent with an undefined position

If the overflow: hidden; parent doesn't have has the position attribute set to the default static (i.e. you haven't set it to relative, absolute, or fixed), you can simply create a wrapper element (parent to the parent element) with position: relative; and set the overflowing child with position: absolute;

.wrapper {
    position: relative;
}
.parent {
    overflow: hidden;
}
.child {
    position: absolute;
    top: -50px;
    left: -50px;
}

Case 2: Parent with a defined position

If the parent does have position attribute, the—although not "proper"—alternative is to use a transform with any value other than none on the wrapper and position: fixed; on the overflowing child, such as follows:

.wrapper {
    transform: scale(0);
}
.parent {
    position: relative;
    overflow: hidden;
}
.child {
    position: fixed;
    top: -50px;
    left: -50px;
}

This occurs because the transform overrides the position: fixed; element's containing block—it's reference—which is usually the viewport itself.