absolute div in scrollable div

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich habe folgendes Problem… Ich habe ein Div, was sich scrollen lässt. Darin befinden sich in jeder Zeile kleine Vorschaubild. Gehe ich mit der Maus darauf, soll nun das Bild etwas größer dargestellt werden.

Das Problem, was ich nun habe ich das das „Overlay“ innerhalb des div angezeigt wird und nicht „darüber“.
Ich habe mal etwas vorbereitet: http://jsfiddle.net/slsb/v4nokf47/

bei Mousover „anzeige“ sollt der rote Rahmen eigentlich über dem „Hauptdiv“ liegen. Jemand eine Idee?

Ich freue mich!

2

Schon mit z-index versucht?
http://www.css4you.de/z-index.html

Edit: Nein, eben getestet. Reicht nicht.

3

So vielleicht?!

<!DOCTYPE HTML>
<html>
<head>
<title>Youtube</title>
<meta charset="utf-8">
<style>
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;

}

.list {
 position:relative;
 width:720px;
 min-height:50px;
 padding-top:5px;
 font-size:8pt;
 border:1px solid #000;
 margin:100px;
}

.list b {
 width:100px;
 height:75px;
 background:#aaa;
 top:0px;
 left:100px;
 display:none;
 position:absolute;
}

.list span:hover ~ b {
 transform:scale(2);
 display:block;
}

</style>
</head>
<body>
<div class="list">
 <span>anzeigen</span>
 <p>1</p>
 <p>1</p>
  <b>Bild</b>
 <p>1</p>
 <p>1</p>
 <p>1</p>
</div>

</body>
</html>
4

Hallo djheke,

ohne overflow-y funktioniert es, dass ist richtig. Ich brauche aber den overflow-y: auto denn es ist meist so, dass der Inhalt des divs länger ist als das div. Und wenn ich overflow-y in deiner Idee wieder einsetze, funktioniert auch das nicht mehr. Schade…

Sonst noch Ideen? z-index, hatte ich auch gehofft aber wie bemerkt, leider Wirkungslos.

5

Die einzigen Möglichkeiten wären position:fixed oder das position:relative bei .list entfernen.
Es gibt keine andere Möglichkeit aus einem overflow:auto/scroll/hidden „auszubrechen“.

6

Vielleicht das hier.

Der äußere Rahmen dient nur der Verdeutlichung.

@edit: Hatte mich von min-height: leiten lassen. Das muss natürlich raus, oder zusätzlich noch max-height angeben.

7

okay, ich habe jetzt position:relative entfernt… Ich schwöre, das habe ich vorher schon einmal gemacht und es hat nicht funktioniert… Aber nun funktioniert es ;-)! Danke!!!

8

Das Problem ist leider doch nicht behoben… Der FF kann es aber IE & Chrome, zeigen mir das Bild an der Stelle wo das div gernedert wurde. Es rutscht also quasi beim Scrollen nicht an die neue Stelle…

jetzt wird’s lustig…

9

Wenn du position:relative entfernst, richtet sich position:absolute am Viewport. Hast du die das letzte Beispiel von mir getestet?

10

Ja, genau das ist ja das Problem… Wenn ich ein Bild unterhalb des sichtbaren Bereiches habe, wird das absolute Bild nicht mit nach „oben gescrollt“ sondern wird eben an der Position des Starts angezeigt. Ich denke, da komme ich nur javascript gegen an, oder?

11

Zeigt doch mal dein gesamten Code.