Absolut positionierte div mit overflow auto verursacht Kind absolute div abgeschnitten werden

Ich habe einen absolut positionierten div mit overflow: auto. Innerhalb dieses div ist in einem anderen absolut positionierten div. Mein problem ist, dass dieses Kind div beschnitten wird durch den überlauf. Ich will, dass es die Flucht der div-container, wie es wäre, wenn overflow nicht gesetzt wurde. Ich habe versucht Einstellung der z-Indizes aber es hilft nicht. Was kann ich tun?

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent {
   position:absolute;
   z-index:0 
   overflow:auto;

   width:400px;
   height:400px;

   border:1px solid #000;
}

.child {
    poisiton:absolute;
    z-index:1

    width:300px;
    height:450px;

    border:1px solid #f00;
}
  • +1. jsfiddle beliebt 'Runden diese Teile.
  • Ich habe so getan. Wie Sie sehen können, das untergeordnete div kommt nicht von den Eltern.
  • Warum sind Sie mit overflow: auto wenn Sie nicht wollen, es zu scrollen?
  • Ich brauche es, um zu Blättern andere Elemente wie Texte (die nicht in diesem Beispiel) allerdings brauche ich diese div-Popout fest wie es sein wird, die Anzeige weiterer Informationen wie Bilder.
  • Siehe meine Antwort; es ist nicht klar, wie genau es funktionieren würde, für einige Elemente, um pop-out und andere nicht. Wie würde das Aussehen?
  • Ohne überlauf es Funktionen Weg, ich brauche es, jedoch ist der überlauf ist wichtig zu halten, nicht absolut positionierte Elemente enthalten. Aber das Kind-div ist absolut positioniert, und ich brauche Sie nicht beeinflusst werden durch die overflow-Eigenschaft
  • Möglich, Duplikat der Wie Sie arbeiten, um das automatische schneiden der übergelaufene Inhalt overflow: auto?
  • wie kann eine 6 Jahre alte Frage, die das doppelte von einer gefragt wurde, gestern??? Wenn überhaupt, sollte es die andere Weise herum.
  • 1) Zwar ist es untypisch, keine Regel, die es verbietet. 2) Ferner werden in dieser Frage abgebrochen wird, ohne eine akzeptierte Antwort, während der andere hat eine akzeptierte Antwort. 3) Vergleichen Sie auch die Qualität der Antworten. 4) Schließen eine Frage als dupe nicht sagen, dass jedes negative aus der gegebenen Frage nicht gelöscht wird, bleibt es trotzdem upvote-können und so weiter. Es sagt nur, dass es eine bessere alternative.
  • Es gibt bereits 5888 ähnliche Ereignisse, die auf StackOverflow. In der Rekord, der betrogene ist 7,5 Jahre älter als das original.

InformationsquelleAutor user969622 | 2011-09-28
  1. 5

    Sehen, wenn Sie können sich darauf verlassen, eine andere Methode zum löschen Ihres schwebt. Ändern Sie Ihre CSS overflow: visible ist definitiv eine gute Lösung.

    Deine andere Lösung ist, um die div außerhalb des Containers, so dass es nicht abgeschnitten wird, und setzen Sie beide innerhalb von einem neuen container:

    <div class="container">
    <div class="parent">
    </div>
    <div class="child">
    </div>
</div>

    CSS:

    .container { 
    /* apply positioning from .parent */
}
.parent {
    position: absolute;
    top: 0; 
    left: 0;
}
.child {
    /* apply positioning from .child */
}
    InformationsquelleAutor Wex
  2. 1

    Wenn Sie möchten, dass einige Elemente, die nicht über die Eltern und einige Elemente, die nicht, Sie wären besser dran, Platzierung des aktuellen child-div außerhalb des aktuellen übergeordneten Elements. Nur machen es zu einem absolut positionierten peer.

    • Wie kann ich es machen, erscheinen aus der Sicht der Referenz innerhalb des Eltern-div? Zum Beispiel, wenn es wurde innerhalb des übergeordneten div-Element und neben ein paar text-popup neben diesem text, aber wenn ich den div außerhalb des übergeordneten div - how, dann würde ich es popup-neben den gleichen text, wenn das Kind-element nicht mehr daneben?
    • Bedeutung Sie es wollen, scrollen Sie mit dem rest des Inhalts und pop-out? Ich denke, Sie brauchen JavaScript, um zu erreichen, dass Wirkung.
    • Wenn man mit Hilfe von jQuery, es ist ein Ereignis für das scrollen, die Sie verbrauchen können. Sie würden dann zur Berechnung der scroll-position und bewegen Sie das zweite div, dass nach. Siehe api.jquery.com/scroll.
    • Ich habe eine Lösung gefunden, indem die untergeordneten div mit fester position und nicht als absolute, scheint die Flucht der überlauf des übergeordneten Containers
    InformationsquelleAutor Jacob
Schreibe einen Kommentar