CSS positioning property
CSS position
The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
Syntax:
position: static | absolute | fixed | relative | sticky | initial | inherit;
There are following important types of positioning method used for an element. These are:
a. Static
b. Relative
c. absolute
d. fixed
e. Sticky
Elements have positioned using the top, bottom, left and right properties. However, these properties will not work unless the position property is set. It also work differently depending on the position value
1 . position: static
This is default value of position it means that if the position value for an element is not set, then it will be static. The left, right, top, bottom properties have no effect in the position.
Static position Example
<! Doctype html>
<html><head>
<style>
#box1 {
border-width: 10px;
border-style:ridged;
background-color: yellow;
height:100px;
border: dotted;
#box2{
border:2px dashed red;
padding: 50px;
background-color: gray;
height: 200px;
position: static;
}
</style>
</head>
<body>
<h1> Static positioned elements are positioned according to the normal flow of the web page.</h1>
<div id="box1">I am division 1, I am static positioned </div>
<div id="box2">I am division 2, I am also static positioned.</div>
</body></html>
Static position output
2. position:relative
The element will be positioned relative to its normal position in the webpage. The left, right,top,bottom properties are used then to set it location on the webpage. The gap (space) created due to this adjustment.
Position: relative Example
<! Doctype html><html>
<head><style>
#box1{
border: 10px dotted blue;
background-color:beige;
position: relative;
left: 60px;
top:50px;
width:200px;
height:200px;
}
#box2{
border:2px dashed red;
background-color:azure;
position: relative;
left:300px;
bottom:150px;
width:200px;
height:200px;
padding-left:20px;
padding-top: 20px;
}
</style> </head>
<body>
<h1> Relative positioned elements are positioned relative to its normal position. </h1>
<div id="box1"> I am box 1, I am relatively
positioned <br> (60px left and 50px top from my normal position).</div>
<div id="box2"> I am box 2, I am relatively positioned <br>(i.e. 300px left and 150px bottom from my normal position. </div>
</body>
</html>
Position:relative output
3. Position absolute
The element will be positioned relative to its closest positioned ancestor (parent). The left, right, top, bottom properties are used to set the location of the element relative to the closest positioned ancestor. No space (gap) is created due to this adjustment (setting value of left, right, top, and bottom).
Position absolute Example
<! Doctype html>
<html><head>
<style>
#box1{
background-color: yellow;
position: relative;
left: 40px;
top: 20px;
width:500px; height:300px;
border: 10px dashed blue; }
img {
position: absolute;
height:200px;
width:200px;
right:10px;
bottom:10px;
border: 10px dotted red;
}
</style> </head>
<body>
<h1> Absolute positioned element positioned <br>relative to its closest ancestor. </h1>
<div id="box1"> This is box 1, I am relatively positioned <br>(i.e. 40px 1- 50px top from my normal position.<br><br> This image is positioned absol i.e.10px from bottom, 10px from right to my (div) position because 1 ancestor of the image).
<img src="12.jpg"> </div>
</body></html>
Position : absolute output
4. Position: Fixed
It is used to set element is fixed even if window scroll vertically or horizontally element is fixed place. No space (gap) is created due to this adjustment (setting value of left, right, top, and bottom).
Position Fixed Example
<!Doctype html>
<html> <head><style>
div{
background-color: yellow;
position: fixed;
height: 60px; width:400px;
right:10px; bottom: 10px;
border :10px dotted blue;
}
</style> </head>
<body>
<br><br><br><br><br><br><br>
<h1>Example of CSS Position: FIXED </h1> <br><br><h1>See at bottom right corner of the screen. The fixed positioned div adjusted according to viewport of the screen (i.e. 10px right and 10px bottom from viewport of the screen.</h1>
<br> <br> <br> <br><br> <br> <br><br> <br> <br> <br> <br> <br><br><br><br><br><br><br>< br > <br> <br> <br> <br> <br> <br> <br> <br><br><br><br><br><br><br><br> <div><h1>Please Scroll the web page. </h1> </div> <br>< br ><br><br> </body> </html>
Position Fixed output
5.position: Sticky
This position value works like as a mixture of relative and fixed. It behaves l relative position before the page scrolls and then sticks on the page based on the value of top, le might and bottom.
position: Sticky Example
<html><head>
<style>
div {
background-color:yellow;
position: sticky:
height: 60px; width:400px:
left:0px;
top:0px;
border: 10px dotted blue;
</style></head>
<body>
<h1> Example of Sticky positioned elements</h1>
<h1>The below is sticky positioned div.</h1> <div><h1>Please Scroll the page</h1>
</div>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br> <<br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br>
</body>
</html>
position: Sticky output
Referance link
