Warum funktioniert „overflow:hidden' nicht bei einem absolut positionierten inneren DIV, es sei denn, der äußere DIV ist relativ positioniert?

Absolute Position und Überlauf ausgeblendet

Beim Umgang mit verschachtelten DIVs kann es schwierig sein, die Anzeige des inneren DIV innerhalb der Grenzen zu steuern des äußeren DIV, insbesondere wenn Eigenschaften wie Overflow Hidden verwendet werden. Diese Frage untersucht ein bestimmtes Szenario, in dem das äußere DIV nicht absolut positioniert ist, was dazu führt, dass das absolut positionierte innere DIV die Overflow-Hidden-Direktive des äußeren DIV ignoriert.

Um dieses Problem zu beheben, umfasst die vorgeschlagene Lösung eine Änderung der Positionierung des äußeren DIV relativ und behält die absolute Positionierung des inneren DIV bei. So funktioniert es:

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    position: relative;
    overflow: hidden;
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 250px;
    top: 250px;
}

Indem Sie den äußeren DIV auf position: relative setzen, erstellen Sie ein neues Koordinatensystem innerhalb dieses Elements, das als Referenzpunkt für die Position des inneren DIV dient. Dadurch kann der innere DIV am äußeren DIV verankert bleiben und gleichzeitig die verdeckte Überlaufbeschränkung des äußeren DIV einhalten. In dieser Konfiguration wird der Inhalt des inneren DIV innerhalb der Grenzen des äußeren DIV abgeschnitten.

Alternativ können Sie auch die Verwendung von „position: Fixed“ für das innere DIV in Betracht ziehen, wodurch dessen Position relativ zum Ansichtsfenster festgelegt wird als der äußere DIV. Dieser Ansatz bietet möglicherweise mehr Kontrolle über die Platzierung des inneren DIV, insbesondere wenn Sie ihn außerhalb der Grenzen des äußeren DIV positionieren müssen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „overflow:hidden' nicht bei einem absolut positionierten inneren DIV, es sei denn, der äußere DIV ist relativ positioniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!