CSS Positioning Layout
Studymuch.in CSS Layout Positioning with Programming
In this tutorial we will learn different types of position in CSS, and here we learn how to use this position in HTML documents.
Here we will learn the CSS Position with different values with programming examples and output of programming. You can free to copy our website’s code for learning and using your own learning projects.
CSS Layout Positioning
In CSS the only four layout positions that is the top, right, left and bottom CSS properties sets location of positioned elements.
For set this position we need to use the valid value and that value is percentage
and length.
The position CSS property sets how an HTML element is positioned, below some valid value is given to sets the position of an element.
- Relative
- Fixed
- Static
- Absolute
- Sticky
Now you learn all the valid value below and see the programming examples of all positions with output also.
CSS Relative Position
In CSS the position: relative; element is positioned according to the normal flow of the document.
The top, bottom, right and left CSS propertied specify the offset relative to itself, it will be adjusted from its normal positions. Unlike the margin properties, it does not push against and affect other elements.
Programming Example of Relative Position;
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Position</title> <style type="text/css"> .relative{ position:relative; width: 200px; height: 200px; left: 20px; top: 20px; color:white; background: blue;} </style> </head> <body> <div class="relative">Relative Position</div> </body> </html> |
Output of above programming example;
CSS Fixed Position
In CSS position: fixed, you can scroll the paragraph and sentences, that means it is freezing one place.
The element is removed from the normal document flow, and no space is created for the element in the page layout.
It makes an element be positioned relative to the viewport the element stays in its location even when scrolling, element is not scrolling.
The top, bottom, right and left CSS properties specify the distance between the top, bottom, right and left edge of the element and the top, bottom, tight and left edge of the viewport according to the elements.
Programming Example of Fixed position;
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <link rel="stylesheet" href="https://fonts.googleapis.com/ icon?family=Material+Icons"/> <style type="text/css"> div{position: fixed; height: 35px; width: 60px; top: 100px padding-left: 30px; border-radius: 50px; right: 4px; color: white;} .div1{top: 100px; background: green;} .div2{top: 140px; background: red;} .div3{top: 180px; background: blue;} body{background: lightblue;} </style> </head> <body> <div class="div1"><span class="material-icons"> supervised_user_circle</span></div> <div class="div2"><span class="material-icons"> accessible</span></div> <div class="div3"><span class="material-icons"> https</span></div> <p>lorem200</p> <p>lorem500</p> <p>lorem300</p> <p>lorem200</p> <p>lorem200</p> <p>lorem500</p> </body> </html> |
Output image of above programming example;
See video and better understand the Fixed Position;
You can see the output of above programming example; some paragraph is written and three division icon circle is middle right side of the pages. This circle is fixed position that means if you scrolling the paragraph the circle is not scrolling because it’s position is fixed.
CSS Absolute Position
In CSS the position: absolute; is use to remove from the normal document flow and no space created for the element in the page layout. It makes an element be positioned relative to its container (nearest parent or ancestor element). Below see the programming example.
Programming examples of Absolute Position;
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Position</title> <style type="text/css"> .box{width: 200px; position: relative; height: 200px; background: lightgreen;} .absolute{ position: absolute; bottom: 10px; left: 10px; height: 10px; width: 30px; height: 30px; border-radius: 50px; background: red;} </style> </head> <body> <div class="box"> <div class="absolute"></div> </div> </body> </html> |
Output of above programming example;
Above you can see the output of above programming example; a red color circle is bottom left side in a square green container, the position of red circle is absolute.
CSS Sticky Position
In CSS position: sticky, the element is positioned according to the normal flow of the document. It offset the element to nearest ancestor scrolling element.
The top, bottom, left and right CSS properties specify to the offset of left, right, bottom and top edge of the nearest ancestor of scrolling elements. Below sees the programming example for better understanding.
Programming Example of Sticky Position;
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Position</title> <style type="text/css"> div{position: sticky; color: white; position: -webkit-sticky; padding: 5px; width: 100%; top: 0px; left: 0px; font-size: 20px;} .sticky1{background: darkblue;} .sticky2{background: darkmagenta;} .sticky3{background: darkgreen;} .sticky4{background: darkorange;} .sticky5{background: rgb(110,3,143);} .sticky6{background: rgb(145,2,2);} .sticky7{background: rgb(3,104,129);} </style> </head> <body> <div class="sticky1">StudyMuch.in</div> <p>lorem25</p> <div class="sticky2">StudyMuch.in</div> Lorem25 <div class="sticky3">StudyMuch.in</div> Lorem25 <div class="sticky4">StudyMuch.in</div> Lorem25 <div class="sticky5">StudyMuch.in</div> <p>lorem50</p> <div class="sticky6">StudyMuch.in</div> <p>lorem50</p> <div class="sticky7">StudyMuch.in</div> <p>lorem50</p> </body> </html> |
Output video of above programming example; sticky position;
Above you can see the output of programming video; division is not scrolling fully, if one paragraph section of division is finished then division is scrolling, all section of division is same working because we used sticky position.
CSS Static Position
In CSS, the position: static; is default in HTML elements. It makes an element be positioned according to the normal flow of the document. Below see the programming example to understanding better.
Programming Example of Static Position;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> div{position: static; width: 160px; height: 160px; color: white; background: darkgreen;} </style> </head> <body> <div>Learn with StudyMuch</div> </body> </html> |
Output of above programming example;
Above you can see the output of programming example; the output is static position in CSS.
So, in this tutorial we learned the CSS Layout – Position with definition and programming example with output of all CSS position. I hope you all understands this tutorial, if you have any doubt, you can ask in the comment section.
NOTE:
You can copy the code from this tutorial for understanding and using in our own learning project, and make better HTML and CSS projects.
Learn Also-
0 Comments