CSS and Position


CSS position

This property allows different positions to HTML elements such as: (relative,static,fixed,sticky,unset,absolute)

Position relative

This is relatively in normal position. You can use top,bottom,left and right properties to change their layout.

Example <style> div#relative { position: relative; border: 2px groove powderblue; left: 20px; } </style> <h2>position relative </h2> <p> Position relative this is a normal position </p> <div id="relative"> This div position is relative; </div>

Position fixed

Example <style> #fixed { position: fixed; top: 80px; left:50px; width: 200px; border: 1px double violet; color: white; background-color: purple; } div.absolute{ position:absolute; left:50px; height:1500px; top:500px; background-color:orange;} </style> <div class="absolute">This div explain in next example you can only focus on <b>fixed div</b>. </div> <h2 style="position: fixed;left: 50px;">fixed position </h2> <div id="fixed"> This div position is<b> fixed</b> You can scroll down the page and see this effect. </div>

Position Absolute

Example <style> div#relative { position: relative; height: 300px; width: 500px; border: 2px double blue; } div#absolute { position:absolute; ; top: 80px; left: 0; height: 200px; width: 300px; border: 2px solid gray; } </style> <h2>position absolute</h2> <p>In position absolute :div can attach with parent border from the side where it is nearest to it. This div left side is near that,s why it is merge each other. </p> <div id="relative">The position of this element is relative <div id="absolute">The position of this element is absolute</div> </div>

position sticky

Example <style> #sticky { position: sticky; border: 1px solid black; top: 2px; padding: 4px; background-color: violet; } #scrolling{ padding-bottom: 1500px; } </style> <p>Scroll down the page and see what is sticky position </p> <p>The following text is irrelivant for you but provide scrolling<p> <div id="sticky">This is sticky div</div> <div id="scrolling"> <b>The sticky div is stick at the <b>top: 2px;</b> <p> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. .</p> </div>
Chapter Next »