Wie kann man ein absolut positioniertes Element außerhalb des übergeordneten Bildlaufs platzieren, aber trotzdem mit ihm blättern?

Ich habe ein scrollendes div von kleinen Vorschaubildern, über die der Benutzer schweben kann, um ein Bild voller Größe zu sehen. Ich habe dies erreicht, indem ich position: absolute; auf den größeren Bildern verwendet habe.Wie kann man ein absolut positioniertes Element außerhalb des übergeordneten Bildlaufs platzieren, aber trotzdem mit ihm blättern?

Dies funktioniert gut für die erste Zeile der Vorschau, aber wenn ich scrollen, um die zweite Zeile anzuzeigen, erscheint das Bild in voller Größe weiter unten auf der Seite - wo die Vorschau war zuvor habe ich zu ihnen gescrollt.

Wenn ich jedoch das übergeordnete Element auf position: relative; setzen, sind die Bilder nur innerhalb des Scroll-Div sichtbar - so kann der Benutzer nur einen Abschnitt jedes Bildes gleichzeitig sehen und muss scrollen, um das Ganze zu sehen.

HTML:

<div class="container"> 
    <div class="preview"> 
     <img class="big"> 
     <img class="small"> 
    </div> 
</div>

Aber mit mehreren preview divs innerhalb des container div.

CSS:

.container { 
    width: 300px; 
    height: 120px; 
    overflow: auto; 
} 
.preview { 
    display: inline-block; 
} 
.small { 
    width: 100px; 
} 
.big { 
    display: none; 
    position: absolute; 
    z-index: 2; 
} 
.preview:hover .big { 
    display: block; 
}

ich hier eine Geige haben, farbige divs anstelle von Bildern mit .big und .small darzustellen: https://jsfiddle.net/jsd8t3gr/3/

Gibt es trotzdem kann ich die .big Bilder halten außerhalb der Schwimm .container Div wie es in der ersten Geige Beispiel tut (keine relative Positionierung), aber auch sie bewegen, wenn der Container div scrollt, wie sie es im zweiten Geige Beispiel tun (mit relativer Positionierung auf der .container div)?

Alles, was ich bis jetzt gefunden habe, hängt damit zusammen, dass die Bilder vom Überlaufen des Elternteils gestoppt werden. Ich habe nichts darüber gefunden, dass das absichtlich geschieht.

BEARBEITEN - Mit dieser Methode ohne Einstellung Container div zu haben relative Position funktioniert perfekt in Firefox; es ist nur ein Fall von dies zu arbeiten Cross-Browser

Quelle

2016-07-13 Emma N

nicht sicher über die „aber haben sie auch bewegen, wenn die div-Container Rollen“ Teil ... – ecchymose

Interessant. Es funktioniert jedoch wie in Firefox. –

Ich hatte gar nicht gemerkt, dass das in Firefox funktioniert - das ist absolut ideal. Gibt es eine Möglichkeit, den Browser konsistent zu machen, weißt du? –

Ohne relative Position, definieren top von big so wird es relativ zum Stamm sein. Wenn Sie top nicht definieren, wird es standardmäßig relativ zum übergeordneten Element sein. Das scheint beim Scrollen nicht auf Chrome zu aktualisieren. Schöner Fund!

Arbeits Geige - https://jsfiddle.net/jsd8t3gr/6/

Quelle

2016-07-14 01:50:18

Gute Eins. Ich dachte nicht daran, 'container' in einem relativ positionierten div mit Überlauf sichtbar zu machen ... –

Sie sind ein Genie. Vielen Dank! –

Wie kann man ein absolut positioniertes Element außerhalb des übergeordneten Bildlaufs platzieren, aber trotzdem mit ihm blättern?

Antwort

Verwandte Themen