Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann man bestimmte Tags dazu bringen, Overflow:hidden zu ignorieren?

Mary-Kate Olsen
Freigeben: 2024-11-03 22:26:30
Original
287 Leute haben es durchsucht

How to Make Specific Tags Ignore Overflow:hidden?

So erlauben Sie bestimmten Tags das Überschreiben von Overflow:hidden

Beim Arbeiten mit Elementen innerhalb eines Containers kann es vorkommen, dass Sie auf bestimmte Tags stoßen Elemente können aus den Grenzen des Containers ausbrechen und im Wesentlichen die overflow:hidden-Eigenschaft überschreiben. So können Sie dies mit HTML und CSS erreichen.

Damit ein bestimmtes Tag die Regel „overflow:hidden“ ignorieren kann, müssen Sie das überlaufende Element mithilfe eines anderen übergeordneten Elements positionieren. Der Container mit overflow:hidden sollte eine position:static haben, während das überlaufende Element relativ zu einem höheren übergeordneten Element positioniert ist. Diese Einrichtung ermöglicht es dem überlaufenden Element, die Grenzen seines übergeordneten Elements zu verlassen, ohne andere Elemente innerhalb des Containers zu beeinträchtigen.

Beachten Sie den folgenden HTML- und CSS-Code:

<code class="html"><div class="relative-wrap">
    <div class="overflow-wrap">
        <div class="respect-overflow">
        </div>
        <div class="no-overflow">
        </div>
    </div>
</div></code>
Nach dem Login kopieren
<code class="css">.relative-wrap {
    position: relative;
}

.overflow-wrap {
    height: 250px;
    width: 250px;
    overflow: hidden;
    background: lightblue;
}

.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: green;    
}
.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: red;
}</code>
Nach dem Login kopieren

In diesem Beispiel , das .overflow-wrap-Div hat eine Höhe und Breite von 250 Pixel und overflow:hidden, was bedeutet, dass alle Inhalte, die über seine Grenzen hinausgehen, ausgeblendet werden. Allerdings kann das .no-overflow-Div, das absolut positioniert ist, über das .overflow-wrap-Div hinausgehen, da seine Positionierung auf das .relative-wrap-Div verwiesen wird, das eine position:relative hat. Das .respect-overflow-Div hingegen, das relativ zum .overflow-wrap-Div positioniert ist, respektiert die overflow:hidden-Regel und ist innerhalb ihrer Grenzen enthalten.

Mit dieser Technik können Sie Elemente erstellen, die angezeigt werden um aus einem Container auszubrechen, ohne die Positionierungs- und Überlaufeigenschaften anderer Elemente in diesem Container zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie kann man bestimmte Tags dazu bringen, Overflow:hidden zu 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