What is position property?
- The CSS position property is used to specify where an element is displayed on the page. When paired with the top, right, bottom, and left CSS properties, the position property determines the final location of the element.
Default Value: static.
CSS position values:
- static
- relative
- fixed
- absolute
- sticky
Static Position:
- The position property to define the positioning behavior of an element on a web page. When you set an element’s position to “static”, it is the default position value and does not require any additional positioning properties.
Here’s an example of how you can apply the static position to an element using CSS:
.element {
position: static;
}- With the position: static property, the element will follow the normal flow of the document and will not be affected by the top, bottom, left, or right properties. It will be positioned based on its place in the HTML structure and the default layout of block or inline elements.
Sample Code:
<!--style.html-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="blog.css">
</head>
<body>
<h2>position: static;</h2>
<div class="static"></div>
<h2>position:relative;</h2>
<div class="relative"></div>
<div class="fi"><h2>position:fixed;</h2>
<div class="fixed"></div></div>
<div class="ab"><h2>position:absolute;</h2></div>
<div class="absolute"></div>
<h2>position:sticky;</h2>
<div class="sticky"></div>
<div class="content"><p>
</body>
</html>
//style.css
div.static {
position: static;
border: 3px solid #73AD21;
background-color:red;
width: 50px;
height: 50px;
}
Output:
Relative Position:
- The position property can also be set to “relative” to establish a positioning context for an element. When an element is positioned relatively, it can be moved from its original position while still affecting the layout of other elements.
Here’s an example of how you can apply the relative position to an element using CSS:
.element {
position: relative;
top: 20px;
left: 30px;
}
- The .element class is set to a relative position. The top and left properties specify the distance by which the element will be moved from its normal position, in this case, 20 pixels down and 30 pixels to the right.When an element is relatively positioned, it retains its space in the normal flow of the document, meaning that other elements will be positioned as if the relatively positioned element still occupies its original space. However, any adjustments made to its top, bottom, left, or right properties will affect its position within the layout.
- It’s important to note that elements positioned relatively can also be layered using the z-index property to control their stacking order.
Sample Code:
//style.css
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
width: 50px;
height: 50px;
background-color:rgb(236, 125, 125);
}Output:
Fixed Position:
- The position property can be set to “fixed” to position an element relative to the viewport, regardless of scrolling. This means that a fixed-positioned element will stay in a fixed position even if the user scrolls the web page.
Here’s an example of how you can apply the Fixed position to an element using CSS:
.element {
position: fixed;
top: 20px;
left: 30px;
}- The .element class is set to a fixed position. The top and left properties specify the distance from the top-left corner of the viewport where the element will be positioned. In this case, the element will be positioned 20 pixels down from the top of the viewport and 30 pixels from the left.
- Fixed-positioned elements are removed from the normal document flow, so they don’t affect the positioning of other elements. They are layered above the other elements on the page, even if those elements scroll underneath. If you want the fixed element to stay in a specific position regardless of scrolling, the top, bottom, left, or right properties can be adjusted accordingly.
- Keep in mind that fixed positioning is relative to the viewport, so if the user resizes the browser window, the element will remain fixed in its defined position.
Sample Code:
//style.css
div.fixed {
position: fixed;
bottom:0 ;
right: 0;
width: 50px;
height: 50px;
border: 3px solid #73AD21;
background-color:rgb(231, 173, 173);
}Output:
Absolute Position:
- The position property can be set to “absolute” to position an element relative to its nearest positioned ancestor or the initial containing block if no positioned ancestor is found. When an element is positioned absolutely, it is taken out of the normal flow of the document.
Here’s an example of how you can apply the absolute position to an element using CSS
.element {
position: absolute;
top: 50px;
left: 100px;
}- The .element class is set to an absolute position. The top and left properties specify the distance from the top-left corner of the nearest positioned ancestor (or the initial containing block) where the element will be positioned. In this case, the element will be positioned 50 pixels down from the top and 100 pixels from the left.
- Absolute-positioned elements are removed from the normal document flow, which means they do not affect the positioning of other elements. They are positioned in relation to their nearest positioned ancestor or the initial containing block. If there is no positioned ancestor, the initial containing block is typically the viewport.
- It’s important to note that when an element is positioned absolutely, its position is not affected by scrolling. If the containing block or positioned ancestor scrolls, the absolute positioned element will stay fixed in its specified position.
- Absolute positioning is commonly used for creating overlays, tooltips, or other elements that need to be precisely positioned within a specific context on a webpage.
Sample Code:
div.absolute {
position: absolute;
top: 290px;
left:20;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
background-color: crimson;
}Output:
Sticky Position:
- The position property can be set to “sticky” to create an element that behaves as a hybrid between “relative” and “fixed” positioning. A sticky positioned element is initially positioned according to the normal flow of the document, but it becomes “stuck” (i.e., fixed) to a specific position as the user scrolls.
Here’s an example of how you can apply the absolute position to an element using CSS
.element {
position: sticky;
top: 20px;
}- The .element class is set to a sticky position. The top property specifies the distance from the top of the nearest scrolling ancestor at which the element will become sticky. In this case, the element will become sticky and start sticking to the top of its scrolling ancestor when it reaches 20 pixels from the top.
- Sticky positioning is typically used in conjunction with a specific scrollable container, such as a <div> with a defined height and an overflow property set to “scroll” or “auto”. The sticky element will remain within the flow of its parent container until the user scrolls to a point where the specified threshold is met. Once that threshold is reached, the sticky element will remain fixed in place relative to the scrolling container, until the user scrolls back above the threshold.
- It’s important to note that browser support for sticky positioning may vary, particularly in older browsers. Additionally, for the sticky positioning to work correctly, the sticky element needs to have a defined height and be contained within a scrollable parent.
Sample code:
div.sticky {
position: -webkit-sticky;
position: sticky;
width: 50px;
height: 50px;
top: 0;
padding: 5px;
background-color: #7a0b0b;
border: 2px solid #4CAF50;
}
Output:
Conclusion:
- In conclusion, CSS provides several position values that allow you to control the positioning of elements on a web page:
- Each position value has its own characteristics and use cases. By understanding and utilizing these CSS positioning options, you can create dynamic and responsive layouts for your web pages.