Positions Properties in CSS
This Blog includes basic position properties in CSS with code snippets
Photo by Jeffrey Leung on Unsplash
The position CSS property sets how an element is positioned in a document. This property specifies which positioning method will be apllied on the HTML element. This property determines the position of element with top, bottom, left, right properties.However, these properties will not work unless the position property is set first.
PermalinkBasic Position Values
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
PermalinkValues:
Permalinkposition: static;
HTML elements are positioned static by default. The top, right, bottom, left properties have no effect on static positioned elements.
Code Snippet:
<style>
div.static{
position: static;
border: 5px solid #d60667;
}
</style>
<body>
<h2>Welcome to CSS Positions</h2>
<p>Example of position:static;</p>
<p>It is always positioned according to the normal flow of the page</p>
<div class="static">
This div element has position: static;
</div>
</body>
OUTPUT:
Permalinkposition: relative;
An element with position: relative; is positioned relative to its normal position. In this position property we can adjust the top, bottom, left, right values from it's normal flow.
Code Snippet:
<style>
div.relative{
position: relative;
left: 50px;
border: 5px solid #d60667;
}
</style>
<body>
<h2>Welcome to CSS Positions</h2>
<p>Example of position:relative;</p>
<p>An element with position: relative; is positioned relative to its normal position</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
OUTPUT:
Permalinkposition: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor. It doesn't follow the standard DOM model & only follows the set of rules which are instructed. Absolute positioned elements are removed from the normal flow, and can overlap elements.
Code Snippet:
<style>
div.relative{
position: relative;
width: 300px;
height: 200px;
border: 5px solid #d60667;
}
div.absolute{
position: absolute;
top: 70px;
left: 50px;
width: 150px;
height: 50px;
border: 5px solid #d60667;
}
</style>
<body>
<h2>Welcome to CSS Positions</h2>
<p>Example of position:absolute;</p>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor</p>
<div class="relative">
This div element has position: relative;
<div class="absolute">
This div element has position: absolute;
</div>
</div>
</body>
OUTPUT:
Permalinkposition: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.This property works in respect to viewport/browser.
Code Snippet:
<style>
div.fixed{
position: fixed;
top: 0;
left: 400px;
width: 300px;
border: 5px solid #d60667;
}
</style>
<body>
<h2>Welcome to CSS Positions</h2>
<p>Example of position:fixed;</p>
<p>It always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
OUTPUT
Permalinkposition: sticky;
An element with position: sticky; is positioned based on the user's scroll position.It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
<style>
div.sticky{
position: sticky;
}
</style>
Thanks for reading ! Any Suggestions & Feedback are highly welcomed