Position absolut und Überlauf ausgeblendet

Wir haben zwei DIVs, eine in die andere eingebettet. Wenn der äußere DIV nicht absolut positioniert ist, gehorcht der innere DIV, der absolut positioniert ist, nicht dem Überlauf, der dem äußeren DIV verborgen ist ( Beispiel ).

Gibt es eine Chance, dass der innere DIV dem vom äußeren DIV verborgenen Überlauf gehorcht, ohne den äußeren DIV auf die absolute Position zu setzen (da dies unser gesamtes Layout durcheinander bringt)? Auch die relative Position für unseren inneren DIV ist keine Option, da wir aus einer Tabelle TD "herauswachsen" müssen ( Beispiel ).

Gibt es noch andere Möglichkeiten?

Machen Sie äußere <div>zu position: relativeund innere <div>zu position: absolute. Es sollte für Sie funktionieren.

Was ist mit position: relativedem äußeren Div? In dem Beispiel, das das innere verbirgt. Es wird auch nicht in seinem Layout verschoben, da Sie weder oben noch links angeben.

Ein absolut positioniertes Element wird tatsächlich in Bezug auf ein relativeübergeordnetes Element oder das nächste gefundene relative übergeordnete Element positioniert . Das Element mit overflow: hiddensollte sich also zwischen relativeund absolutepositionierten Elementen befinden:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

Du machst einfach so div:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

Ich hoffe dieser Code wird dir helfen :)