Home > Article > Web Front-end > How to Allow Specific Tags 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!