Heim > Web-Frontend > CSS-Tutorial > Wie kann man dafür sorgen, dass bestimmte Tags Overflow:hidden in HTML-Divs ignorieren?

Wie kann man dafür sorgen, dass bestimmte Tags Overflow:hidden in HTML-Divs ignorieren?

Linda Hamilton
Freigeben: 2024-11-04 00:41:31
Original
1058 Leute haben es durchsucht

How to Make Specific Tags Ignore Overflow:hidden in HTML Divs?

So erlauben Sie einem bestimmten Tag das Überschreiben von Overflow:hidden

Bei der Arbeit mit HTML-Divs kann die Angabe einer Überlaufeigenschaft von „hidden“ bestimmte verhindern Elemente verhindern, dass die Grenzen des Divs überschritten werden. In einigen Fällen kann es jedoch erforderlich sein, dass bestimmte Elemente dies ignorieren und aus dem div herausragen.

Lösung:

Der Schlüssel liegt in der Beibehaltung einer statischen Positionierung für den Überlauf:versteckt Element und Festlegen der Position des überlaufenden Elements relativ zu einem übergeordneten Element auf höherer Ebene, wie unten dargestellt:

<div class="relative-wrap">
    <div class="overflow-wrap">
        <div class="respect-overflow"></div>
        <div class="no-overflow"></div>
    </div>
</div>
Nach dem Login kopieren

Erklärung:

  • Das .relative -wrap-Klasse mit position:relative ermöglicht die Platzierung des inneren Elements relativ zu seiner Position im DOM.
  • Die .overflow-wrap-Klasse verwaltet overflow:hidden zusammen mit einer bestimmten Höhe und Breite, um die Begrenzung zu definieren Bereich.
  • Die Klasse .respect-overflow mit Position: relativ hält sich an die vom übergeordneten Element .overflow-wrap festgelegten Grenzen.
  • Die Klasse .no-overflow mit Position: absolut , ignoriert die Grenzen des übergeordneten .overflow-wrap und positioniert sich relativ zum übergeordneten .relative-wrap.

Das obige ist der detaillierte Inhalt vonWie kann man dafür sorgen, dass bestimmte Tags Overflow:hidden in HTML-Divs ignorieren?. 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