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

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>

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!