CSS Position to layout a website
Shahrukh Khan
What does CSS position do?
Using CSS, you can lay out all your elements on your webpage visually.
For example : You can position an element at the very top of your page, or 50px below the element before it.
Definition and Usage
The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).
It sounds like a lot, but don’t worry! 😊
Here’s how each value for CSS position works:
CSS Syntax
position: static | absolute | fixed | relative | sticky
Property Values
1. static -
Default value. Elements render in order, as they appear in the document
flow.
Example -
div #myDIV
{
position:static;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;
}
2. absolute -
The element is positioned relative to its first positioned (not static) ancestor element.
Example -
div #myDIV
{
position:absolute;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;
}
3. fixed -
The element is positioned relative to the browser window.
Example -
div #myDIV
{
position:fixed;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;
}
4. relative -
The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position.
Example -
div #myDIV
{
position:relative;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;
}
5. sticky -
The element is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
Example -
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<p>Note: IE/Edge 15 and earlier versions do not support sticky position.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
Thank You !!!
I hope that you’ve found this tutorial and code examples on CSS positioning helpful! If you have any questions or feedback, feel free to leave a comment. 😊
Subscribe to my newsletter
Read articles from Shahrukh Khan directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by