Home  >  Article  >  Web Front-end  >  How to Allow Specific Tags to Override `overflow: hidden`?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-04 05:36:01432browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn