How to Allow Specific Tags to Override `overflow: hidden`?

Allow Specific Tag to Override Overflow:hidden

Problem:
You have a div element with a fixed height, width, and overflow:hidden property to clip any inner images. However, you need one image within the div to extend beyond its boundaries.

Solution:
To achieve this, you can position the overflowing image as absolute within a different parent container that has a relative position.

<code class="css">/* parent with relative position */
.relative-wrap {
    position: relative;
}

/* container with overflow:hidden (no relative position) */
.overflow-wrap {
    overflow: hidden;
    height: 250px;
    width: 250px;
}

/* image to respect overflow */
.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
}

/* image to overflow */
.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
}</code>

In this example, the overflow-wrap div has overflow:hidden, while the inner respect-overflow image respects the boundaries. However, the no-overflow image is positioned absolutely within the relative-wrap div, allowing it to extend beyond the overflow-wrap.

The above is the detailed content of How to Allow Specific Tags to Override `overflow: hidden`?. For more information, please follow other related articles on the PHP Chinese website!