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

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>

<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>

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!