Element im Fluss positionieren, aber fixiert lassen

[menuzubereiter]

Hallo!

Ich möchte bei meiner Webseite folgendes erzielen: Die Seite soll ganz normal aufgebaut werden, aber das Menü soll danach fixiert bleiben. Ich möchte das Menü also weiterhin vom normalen Elementfluss positionieren lassen, dann soll es aber fixiert bleiben. Geht das mit CSS?

[Gunnar Bittersmann]

@@menuzubereiter:

nuqneH

Ich möchte bei meiner Webseite folgendes erzielen: Die Seite soll ganz normal aufgebaut werden, aber das Menü soll danach fixiert bleiben. Ich möchte das Menü also weiterhin vom normalen Elementfluss positionieren lassen, dann soll es aber fixiert bleiben. Geht das mit CSS?

Soll man aus der Beschreibung schlau werden?

Wenn ich es geworden bin, suchst du position: sticky.

Irgendwann.

Qapla'

[Gast]

Hallo!

Ich möchte bei meiner Webseite folgendes erzielen: Die Seite soll ganz normal aufgebaut werden, aber das Menü soll danach fixiert bleiben. Geht das mit CSS?

Nicht allein mit CSS. Um den fixierten Bereich musst du mit HTML einen Container legen, der relativ positioniert ist, dann sollte es gehen:

<div style="position:relative, height:2em">  
<div style="position:fixed">  
Fixierter Bereich  
</div>  
</div>

Da der fixierte Bereich im Textfluss keinen Platz einnimmt und die Folgezeilen deshalb mit ihm überlappen, musst du dem relativen Bereich einen Platz zuweisen, hier height:2em.

Gast

[Gast]

Korrektur (Semikolon statt Komma):

<div style="position:relative; height:2em">

[Matthias Apsel]

Om nah hoo pez nyeetz, Gast!

<div style="position:relative, height:2em">

<div style="position:fixed">
Fixierter Bereich
</div>
</div>

  
position fixed; richtet das Element am Viewport aus, unabhängig davon, ob es sich noch in einem Container befindet. Es lässt sich ein wenig tricksen, wenn das fixierte Element in einem absolut positionierten steckt. So lässt sich erreichen, dass es horizontal absolut positioniert ist und vertikal fixiert. Allerdings frage ich mich dabei oft: Zufall oder Absicht?  
  
Beispielseite: <http://brückentage.info/2013/brueckentage-deutschland-2013.html> Schau dir die Werbung für meine-geburtstage.de an, da findest du das beschriebene Verhalten.  
  
Der relativ positionierte Container bewirkt imho überhaupt nichts. Auch das kannst du an meinem Beispiel sehen: Rechts unten ist ein Link zu billiger-im-urlaub, das Bild in diesem Link ist fixiert. Gib mit einem Entwicklerwerkzeug dem umgebenden a-Element position: relative; und du wirst sehen, dass nichts passiert.  
  
Artikel zu position: <http://selfhtml.apsel-mv.de/position/position.html>  
  
  
Matthias

-- 
1/z ist kein Blatt Papier.  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Gast]

Hallo  Matthias,

position fixed; richtet das Element am Viewport aus, unabhängig davon, ob es sich noch in einem Container befindet.

Von welchem Browser schreibst du? Ich habe es in der Opera ausprobiert, da bleibt fixed innerhalb von relative.

Gast

[Gast]

Die Seite soll ganz normal aufgebaut werden, aber das Menü soll danach fixiert bleiben.

Habe das mal angetestet. Sieht Sch*ße aus, wenn die Seite beim Scrollen unter einem fixierten Breich durchläuft, der irgendwo auf der Seite steht.

Pfiffiger ist es, den zu fixierenden Bereich erstmal mitscrollen zu lassen und erst dann per Javascript am oberen (unteren) Seitenrand zu fixieren, wenn er die sichtbare Fläche zu verlassen droht.

Gast

[Matthias Apsel]

Om nah hoo pez nyeetz, Gast!

Pfiffiger ist es, den zu fixierenden Bereich erstmal mitscrollen zu lassen und erst dann per Javascript am oberen (unteren) Seitenrand zu fixieren, wenn er die sichtbare Fläche zu verlassen droht.

Navigation bei Bedarf fixieren

Matthias