✔ position:absolute und scrolling

N

Northrog

Grünschnabel
Hallo,

ich habe jetzt schon eine Weile nach diesem Thema recherchiert aber nichts brauchbares gefunden.
Das Problem ist folgendes:

Aus Designtechnischen Gründen bin ich gezwungen 2 Elemente der Seite - 2 Bilder - absolut zu positionieren.
Eigentlich heißt ja position:absolute dass das Element mitgescrollt wird - d.h. dass es sich NICHT BEWEGT.
Tut es aber.
Dieser Code hier:
Code: 
<img src='files/logo.png' width='152.27' height='75' style='border:0px;position:absolute;left:5px;top:7px;z-index:2;' alt='Logo' />
bindet das Bild zwar an der korrekten position ein, aber es wird mitgescrollt falls der Content der Seite zu groß ist - was natürlich das komplette Layout zerstört.

Kennt irgendjemand eine Möglichkeit das Bild einzubinden ohne dass es gefixt ist?

Ausprobiert mit:

Firefox 3 und Safari unter Mac
Firefox 3 unter Windows
 
Moin,


Northrog hat gesagt.:
Eigentlich heißt ja position:absolute dass das Element mitgescrollt wird - d.h. dass es sich NICHT BEWEGT.
Zum Vergrößern anklicken....

Das heisst es nicht :)

absolute bewirkt eine Positionierung im Elterncontainer...wenn der Elterncontainer gescrollt wird, bleibt das "absolute" Kindelement an selbigem verankert und bewegt sich mit.

Was du suchst, ist position:fixed...das bewirkt eine Verankerung am viewport.

Beachte, dass der IE position:fixed nicht umsetzt, einen Workaround dafür findest du hier:
http://www.cssplay.co.uk/layouts/fixed.html
 
Zuletzt bearbeitet:
Eben genau darum geht es mir ja.
Ich möchte eben nicht ein Ergebnis wie bei fixed erwirken, sondern eines, wie du gerade beschrieben hast, sprich dass es sich beim Scrollen bewegt, im Auge des Users aber nicht bewegt (ganz einfach feste Verankerung).

Hier mal das Markup für die entsprechende Stelle:

HTML: 
<div id='page'>
<img src='files/markup_override.png' style='z-index:1;border:0px;position:absolute;left:88px;top:2px;' height='105' width='793.18' alt='' />
<div id='page_header'>
<div style='float:left;padding-left:0px;'><img src='files/logo.png' width='179.1' height='95' style='border:0px;position:absolute;left:5px;top:5px;z-index:2;' alt='Logo' />
</div>
<!-- und so weiter -->

Wobei folgendes gesetzt ist:

html, body {
overflow-x:hidden;
overflow-y:auto;
height:100%;
width:100%;
padding: 0px;
margin: 0px;
}

#page {
padding:5px 0px 5px 5px;
width:100%;
height:95%;
}

Wenn jetzt aber der Content der Seite zu lang wird (in y-Richtung), dann scrollt man das Logo mit nach untent (aus Sicht des Users, aus CSS-Sicht ist es verankert).

Aber genau das sollte ja nicht sein, da ich ja position:absolute und nicht fixed gewählt habe.
 
Ok ich gebe dir jetzt mal ein Beispiel dann siehst du was ich meine:

geh mal auf http://lukas-herrmann.info/projekte/norisan/ und verkleinere dann dein Browserfenster, bis die vertikale Scrollbar auftaucht.
Dann Scrolle nach unten.
Bei mir bewegt sich dabei das Bild mit nach unten.
Ich habe jetzt mal das Logo auf position:absolute und den Grid auf position:fixed gesetzt - kein Unterschied.
 
Das geht nicht da ich das Grid ja über die Bilder daneben legen muss (logischerweise) also muss ich es absolut positionieren. Und da hätte ich halt gerne, dass es mitgescrollt wird und nicht fixiert in einer Ecke des Bildschirms klebt.
 
Folgendes funktioniert problemlos bei mir:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2008-12-23"  />
<title>Test</title>

<base href="http://lukas-herrmann.info/projekte/norisan/">
<style type="text/css">
<!--
#testdiv{position:relative;float:left;}
-->
</style>
</head>
<body>

<div id="testdiv">
<img src="files/markup_override.png"  style="z-index: 1; position: absolute; right:-24px; bottom: 0;" />
<img src="files/logo.png"       >
<img src="files/markup_1.png"   >
<img src="files/markup_2.png"   >
<img src="files/markup_3.png"   >
<img src="files/markup_4.png"   >
<img src="files/markup_5.png"   >
<img src="files/markup_6.png"   >
</div>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück