Wie kann ich mit „overflow: versteckt' zulassen, dass Elemente einen Container überlaufen?

Container-Überlaufkontrolle für bestimmte Elemente

Es kann vorkommen, dass Sie einen Container mit bestimmten Höhen- und Breitenabmessungen haben und der Überlauf ausgeblendet ist alle Elemente verbergen, die über seine Grenzen hinausgehen. Möglicherweise möchten Sie jedoch auch zulassen, dass sich bestimmte Elemente innerhalb des Containers über diese Grenzen hinaus erstrecken.

Um dies zu erreichen, verwenden Sie den Ansatz, das overflow:hidden-Element mit position:static beizubehalten und das überlaufende Element relativ zu zu positionieren ein höheres übergeordnetes Element (anstelle des übergeordneten Elements overflow:hidden) erweist sich als wirksam. Zum Beispiel:

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

<code class="html"><div class="relative-wrap">
    <div class="overflow-wrap">
        <div class="respect-overflow"></div>
        <div class="no-overflow"></div>
    </div>
</div></code>

In diesem Beispiel dient das .relative-wrap-Div als höheres übergeordnetes Element mit Position: relativ. Innerhalb von .relative-wrap wird das .overflow-wrap-Div (mit overflow:hidden) mit position:static positioniert. Die überlaufenden Elemente (in diesem Fall .respect-overflow und .no-overflow) werden dann relativ zu .relative-wrap (ihrem übergeordneten Element) positioniert, wobei position: relative für .respect-overflow verwendet wird (wobei die Grenzen von .overflow- berücksichtigt werden). wrap) und position: absolute für .no-overflow (die sich über die Containergrenzen hinaus erstrecken kann).

Dieser Ansatz ermöglicht es Ihnen effektiv, Elemente innerhalb eines Containers mit overflow:hidden zu haben, die über seine Grenzen hinausragen können, was ergibt Sie haben mehr Flexibilität in Ihrem Layout und Design.

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