Position absolut div in einem Überlauf-y: blättern div

Ich habe folgende HTML:Position absolut div in einem Überlauf-y: blättern div

<div class="container"> 
<div class="scrollable-block"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    <div class="absolute-div"></div> 
</div>

und CSS:

.container { 
    width: 200px; 
    height: 300px; 
    background: green; 
} 

.scrollable-block { 
    width: 200px; 
    max-height: 250px; 
    overflow: scroll; 
    position: relative; 
} 

.absolute-div { 
    width: 20px; 
    height: 20px; 
    background: purple; 
    position: absolute; 
    top: 0; 
    right: -10px; 
}

Und hier ist eine Live-Demo: http://jsfiddle.net/BYTam/1/

Das grüne div ist der Container und hat eine feste Breite. Das gelbe div ist darin und hat maximale Höhe und Überlauf-y: scroll. Es soll die gleiche Breite wie die grüne haben. Ich versuche das lila div absolut zu positionieren, relativ zum gelben div, aber außerhalb des grünen div - Grund dafür ist, dass ich nicht möchte, dass das gelbe div eine horizontale scrollbar hat. Ist das überhaupt möglich?

Vielen Dank!

Quelle

2013-11-20 Yavor Punchev

Vielleicht können Sie Position: relativ auf .container statt auf .scrollable-Block? Ist das okay für dich? –

Nein, es muss leider relativ zum .scrollable-Block sein. Dies ist ein minimiertes Beispiel für eine komplexere Struktur, die sich so verhalten muss. –

Wenn Sie nicht die horizontalen Scrollbar wollen ändern, nur overflow:scroll zu

overflow-y:scroll; 
overflow-x:hidden;

Quelle

2013-11-20 14:48:06

Ja, aber so bleibt das absolute (lila) div verborgen. –

Seltsam, für mich ist der violette Block in der oberen rechten Ecke des scrollbaren Blocks sichtbar –

Sie können es mit Ihrem aktuellen Markup nicht. Das absolute Div löst immer die horizontale Bildlaufleiste aus, weil sie im scrollbaren Block verschachtelt ist. Scheint so, als würden moderne Browser den Überlauf-x: sichtbar mit Überlauf-y: scroll nicht zulassen.

Quelle

2013-11-20 15:16:25

Gibt es eine Möglichkeit, das absolute Div außerhalb des Container-Divs zu bekommen? Z-Indizes schienen nicht zu funktionieren. –

@AvorPunchev - nicht ohne den HTML-Code zu ändern (oder JavaScript zu verwenden, um den HTML/DOM-Code zu ändern) –

Ich glaube nicht, dass es möglich ist, das absolute div aus dem Scrollblock herausspringen zu lassen. Ich lief durch das gleiche Problem und das ist, wie ich es behoben:

Quelle

2015-09-03 06:59:33 Kareem

Position absolut div in einem Überlauf-y: blättern div

Antwort

Verwandte Themen