Warum funktioniert Overflow:hidden nicht mit absolut positionierten inneren DIVs, es sei denn, das äußere DIV ist relativ positioniert?

Überlauf versteckt und absolute Positionierung

In einem Szenario mit verschachtelten DIVs, in dem das äußere DIV einen Überlauf hat: versteckte Eigenschaft und das innere DIV absolut positioniert ist, hält sich der innere DIV möglicherweise nicht an die Überlaufbeschränkungen des äußeren DIV. Dies tritt auf, wenn das äußere DIV nicht absolut positioniert ist. Das Ändern des äußeren DIV in „position: absolute“ kann das Gesamtlayout stören.

Um dieses Problem zu beheben und gleichzeitig die gewünschte Positionierung des inneren DIV innerhalb einer Tabellenzelle beizubehalten, kann ein anderer Ansatz verwendet werden:

1. Setzen Sie den äußeren DIV auf Position: relativ. Dadurch wird ein neues Koordinatensystem für die inneren DIVs erstellt.
2. Ändern Sie die Position des inneren DIV in „Position: absolut“. Dadurch wird der innere DIV relativ zu seinem nächstgelegenen Vorgänger positioniert, in diesem Fall dem äußeren DIV.

Beispiel:

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

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

Mit dieser Anpassung schränkt die overflow:hidden-Eigenschaft des äußeren DIV nun ordnungsgemäß das innere DIV ein und verhindert so, dass sich sein Inhalt über die Grenzen des äußeren DIV hinaus erstreckt. Darüber hinaus ermöglicht diese Lösung, dass der innere DIV wie beabsichtigt außerhalb der Tabellenzelle wächst.

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