Property Values
CSS Positioning Property is a very useful property of CSS. This property can help you move your elements anywhere in the webpage. CSS Position
CSS position properties :
- CSS Static Positioning
- CSS Relative Positioning
- CSS Absolute Positioning
- CSS Fixed Positioning
- CSS Sticky Positioning
1.STATIC :
This is the default CSS position applicable to all HTML elements . This position place the HTML elements based on normal document flow. Using this position, top/right/bottom/left properties can not be applicable to elements(i.e. static position elements don’t obey top/right/bottom/left properties).
Note : Page scrolling does affect this position.
Example:
<!DOCTYPE html>
<html>
<head>
<title> CSS Positioning Element</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}
.static {
position: static;
background: green;
color: #ffffff;
padding: 30px;
}
span {
padding: 5px;
border: 2px #ffffff dotted;
}
</style>
</head>
<body>
<div class="static">
Example of
<span>position: static;</span>
</div>
<pre>
One day, Molly the milkmaid had filled her pails with milk.
Her job was to milk the cows, and then bring the milk to the
market to sell. Molly loved to think about what to spend her money on.
As she filled the pails with milk and went to market, she again
thought of all the things she wanted to buy. As she walked along
the road, she thought of buying a cake and a basket full of fresh
trawberries.A little further down the road, she spotted a chicken.
She thought, “With the money I get from today, I’m going to buy a
chicken of my own. That chicken will lay eggs, then I will be able to
sell milk and eggs and get more money!”She continued, “With more money,
I will be able to buy a fancy dress and make all the other milkmaids
jealous.” Out of excitement, Molly started skipping, forgetting about
the milk in her pails. Soon, the milk started spilling over the edges,
covering Molly.Drenched, Molly said to herself, “Oh no! I will never
have enough money to buy a chicken now.” She went home with her empty
pails.“Oh, my goodness! What happened to you?” Molly’s mother asked.
“I was too busy dreaming about all the things I wanted to buy that I
forgot about the pails,” she answered.“Oh, Molly, my dear. How many
times do I need to say, ‘Don’t count your chickens until they hatch?’”
</pre>
</body>
</html>Output:
2. Relative :
This position places the elements relative to its normal position. This position is relative to normal document flow, Here top/right/bottom/left properties can be applied to elements.
Note:
- Page scrolling does affect this position.
- If position only applied without top/right/bottom/left properties, it will act like Static position.
Example:
3. Absolute :
This position places the elements at the exact position specified.
This position is relative to
- its parent element position when parent element position is relative/absolute
- document body(browser viewport) when parent element position is static.
- document body (browser viewport) when there is no parent element.
Note :
- Page scrolling does affect this position.
- This position element is completely removed from normal document flow.
4 . Fixed:
This position places the elements at a fixed place relative to the viewport. Page scrolling does not affect this position.
Note: This position elements is completely removed from normal document flow.
5. Sticky:
Sticky position is a combination of relative and fixed. It is relative until it crosses a specified threshold, at which point it is treated as static position.
Many browsers don’t support Sticky position partially/fully.
Several possible values for the position property.
| Value | Description |
|---|---|
| static | Default value. Elements render in order, as they appear in the document flow |
| absolute | The element is positioned relative to its first positioned (not static) ancestor element |
| fixed | The element is positioned relative to the browser window |
| relative | The element is positioned relative to its normal position, so “left:20px” adds 20 pixels to the element’s LEFT position |
| sticky | The element is positioned based on the user’s scroll position sticky element toggles between relative and fixed, depending on the scroll position. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
- The position property is used to specify the type of positioning method used for an element.
- CSS position properties :
- Static Positioning
- Relative Positioning
- Absolute Positioning
- Fixed Positioning
- Sticky Positioning