Statisch, relative, absolute und feste Positionierung

Im Stylesheet

#PositionStatic { position: static; width: 300px; }
#PositionAbsolute { position: absolute; width: 300px; left: 600px; top: 700px; }
#PositionReative { position: relative; width: 300px; left: 400px; }
#PositionFixed { position: fixed; width: 300px; top: 400px; }

Im body-Element:

<p style="color: gray;">Lorem ipsum dolor sit amet, ... </p>
<div id="PositionStatic"><p><strong>Statisch positionierter Container</strong> ... </p> </div>
<div id="PositionAbsolute"><p><strong>Absolut positionierter Container</strong> </p></div>
<div id="PositionReative"><p><strong>Relativ positionierter Container</strong> ... .</p></div>
<div id="PositionFixed"><p><strong>Fest positionierter Container</strong></p></div>
<p style="color: gray;">Aliquam tempus ipsum eget urna egestas sagittis. ... </p>

Hinweis: Ziehen Sie das Browserfenser größer oder kleiner auf oder scrollen Sie die Seite, wenn die positionierten Boxen wichtige Passagen überlagern.

Im Textfluss liegt ein Textabsatz <p style="color: gray;">Lorem ipsum dolor sit amet, ... </p> – der "von Haus aus" statisch positioniert ist. Dem Textabsatz folgt ein statisch positionierter Container <div id="PositionStatic">, der im Textfluss angezeigt wird und bei Änderungen des Inhalts vom vorangehenden Inhalten nach unten verschoben wird.

Dem statisch positionierten Container folgt im Textfluss ein absolut positionierter Container <div id="PositionAbsolute">, der vollkommen aus dem Textfluss genommen ist (er verbraucht keinen Platz im Textfluss und über dem Textfluss liegen kann). Der absolut positionierte Container "wandert" beim Scrollen der Seite mit.

Dem absolut positionierten Container folgt im Textfluss ein relativ positioniertrer Container <div id="PositionReative">, dessen Position realtiv zum Textfluss nach rechts verschoben ist. Der relativ positionierte Container nimmt seinen Platz innerhalb des Textflusses in Anspruch.

Dem relativ positionierten Container folgt im Textfluss ein fest positionierter Container <div id="PositionFixed">, der vollkommen aus dem Textfluss genommen ist (er verbraucht keinen Platz im Textfluss und über dem Textfluss liegen kann). Der fest positionierte Container "wandert" beim Scrollen der Seite nicht, sondern bleibt fest an seiner Position im Browserfenster.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo imperdiet lectus. Morbi luctus, risus vitae convallis lacinia, libero elit mattis mi, quis lobortis lorem est ac erat. Donec feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula magna, fermentum quis, congue quis, mattis eget, lacus. Curabitur a nunc. Nam dui. Vivamus dui. Donec faucibus vulputate metus. Aenean condimentum erat id tellus. Etiam velit. Donec aliquet iaculis felis. Praesent eleifend quam ut elit. Fusce id pede. Phasellus varius. Fusce tristique. Aliquam erat volutpat. Vivamus vitae elit. Quisque sollicitudin orci a quam. Suspendisse accumsan congue urna.

Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est. Pellentesque mi est, pharetra vitae, feugiat quis, condimentum id, eros. Curabitur consectetuer sapien id est. Sed ac arcu ac ipsum bibendum fermentum. Fusce lectus tortor, aliquet ac, scelerisque a, mollis eget, nibh. Donec eu orci ac metus tempor pretium. Proin laoreet sapien eu odio. Cras quam. Ut non leo. Nulla augue nisl, suscipit non, pulvinar porta, ultricies at, diam. Sed tellus eros, feugiat ac, tincidunt ac, pulvinar sed, nisl. Donec pellentesque fringilla nunc. Sed arcu. Fusce fermentum sodales nulla. Vivamus egestas turpis in quam. Donec lacus libero, accumsan eu, euismod id, placerat vitae, tellus. Cras dignissim egestas urna.

Curabitur venenatis feugiat orci. Praesent lorem erat, pulvinar eu, scelerisque quis, suscipit id, tellus. Aenean condimentum, tortor vel convallis ultricies, metus lorem posuere elit, at luctus urna sem eu lectus. Duis wisi est, varius vitae, adipiscing sollicitudin, euismod vitae, eros. Mauris justo nibh, consectetuer sit amet, blandit ut, blandit vel, tortor. Praesent a ante nec velit rutrum placerat. Cras viverra aliquam sem. Ut tincidunt, augue at porttitor aliquet, felis libero ornare quam, et gravida nunc nibh at velit. Nam elementum ullamcorper massa. Nunc malesuada, elit id euismod rhoncus, nunc felis ultrices dolor, in imperdiet diam tellus nec sapien. Nunc ac velit eget diam sollicitudin lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Ut vitae mi. Aliquam in dolor at libero lobortis fringilla. Nullam eget neque eu lectus sagittis faucibus. Fusce ac neque ut purus ultrices suscipit. Pellentesque viverra, ante id aliquet vestibulum, ipsum tortor porta lectus, eget pharetra sem urna gravida urna. Vivamus accumsan. Donec sed est vel magna rhoncus imperdiet. In elit wisi, vulputate a, euismod ac, rutrum sit amet, nunc. In pellentesque mauris non nisl. Vestibulum pellentesque. Vivamus venenatis nunc vitae wisi. Vestibulum nisl urna, sodales vitae, ullamcorper ut, dapibus sed, elit. Phasellus risus. Fusce quis quam. Integer tincidunt justo fermentum enim. Sed sed purus. Donec tempor posuere ligula. Vivamus id risus id sem elementum congue.

Fester Bereich für eine Fussnote im Browserfenster (top, right, bottom, left)

div.footer {
   border: 1px solid #666;
   right: 2%;
   bottom: 1px;
   background: linen;
   color: #333;
   width: 96%;
   height: 20px;
   padding: 5px;
   position: fixed;
}

und im body-Element der Seite:

<div class="footer">Cascading Stylesheets </div>

Hinweis: Durch die feste Positionierung wird der Container für die Fußnote aus dem Textfluss genommen und erscheint durch die Positionsanweisung bottom: 1px immer am unteren Rand des Browserfensters.

Nulla facilisi. In dignissim scelerisque metus. Vivamus vel justo eget eros porttitor imperdiet. Sed in turpis. Morbi porta rhoncus tellus. Aenean dignissim venenatis risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vitae turpis. In iaculis tempus justo. Proin mi. Aliquam quam elit, faucibus quis, porta id, convallis eu, mi. Fusce ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt interdum purus.

Etiam ut massa. Ut tristique. Fusce pellentesque arcu quis ligula. Cras elementum est vitae leo semper ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non ligula vel arcu commodo rhoncus. Nam feugiat, mauris a accumsan hendrerit, pede enim molestie velit, eu adipiscing nisl turpis nec dui. Aenean metus turpis, nonummy a, mattis ac, venenatis ac, tellus. Mauris eget odio non eros pulvinar pulvinar. Vestibulum tempor purus quis mi. Etiam malesuada. Nulla libero sem, condimentum sit amet, semper sed, fermentum sit amet, mi. Integer auctor. Maecenas metus elit, feugiat eget, viverra sit amet, tempor quis, diam. Nunc non velit.

Cras sed metus a risus iaculis tincidunt. Nam lacinia fermentum nisl. In nec lorem in pede volutpat ornare. Ut nonummy erat at ligula. Nunc dictum posuere justo. Nunc non tellus id justo aliquam ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce lacinia. Sed gravida. Praesent ullamcorper volutpat ante.

Cras vitae quam. Sed id tellus ac nunc luctus tincidunt. In sed neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris eget nisl. Aliquam dapibus blandit eros. Donec volutpat. Vestibulum nec felis nec wisi viverra posuere. Aenean iaculis congue wisi. Cras fermentum. Aliquam scelerisque molestie nibh. Proin hendrerit, mi in vestibulum fermentum, sapien sapien ultricies augue, at lobortis diam arcu vitae dui.

zurück