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

Mary-Kate Olsen
Release: 2024-11-04 05:36:01
Original
431 people have browsed it

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>
Copy after login

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!

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template