Heim > Web-Frontend > CSS-Tutorial > Wie kann ich zulassen, dass bestimmte Tags „overflow: versteckt' überschreiben?

Wie kann ich zulassen, dass bestimmte Tags „overflow: versteckt' überschreiben?

Mary-Kate Olsen
Freigeben: 2024-11-04 05:36:01
Original
554 Leute haben es durchsucht

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

Erlaube einem bestimmten Tag das Überschreiben von Overflow:hidden

Problem:
Sie haben ein div-Element mit einer festen Höhe, Breite und overflow:hidden-Eigenschaft zum Ausschneiden aller inneren Bilder. Sie benötigen jedoch ein Bild innerhalb des Div, um über seine Grenzen hinauszugehen.

Lösung:
Um dies zu erreichen, können Sie das überlaufende Bild als absolut in einem anderen übergeordneten Container positionieren hat eine 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>
Nach dem Login kopieren

In diesem Beispiel hat das Overflow-Wrap-Div overflow:hidden, während das innere Respect-Overflow-Bild die Grenzen respektiert. Das Bild ohne Überlauf wird jedoch absolut innerhalb des relativen Wrap-Divs positioniert, sodass es über den Overflow-Wrap hinausgehen kann.

Das obige ist der detaillierte Inhalt vonWie kann ich zulassen, dass bestimmte Tags „overflow: versteckt' überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage