CSS positioning property
CSS position
The element's placement mechanism (static, fixed, relative, absolute, or sticky) is specified by the position attribute. The attributes of top, bottom, left, and right are used to position elements. but still until the position property set first, properties function. Additionally, their operations vary based on the value of the position.
Syntax:
position: static | absolute | fixed | relative | sticky | initial | inherit;
There are important types of positioning method use for an element.
a. Static
b. Relative
c. absolute
d. fixed
e. Sticky
The position of top, bottom, right, and left are used to place elements h. But until the position property is set, the properties won't function. Additionally, it operates differently based 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 positioned relative to normal position in the webpage. The left, right,top,bottom properties are use then to set it location on the webpage. The gap (space) created due to 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 closest positioned ancestor (parent). The left, right, top, bottom properties are use to set the location of the element relative to 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
Related post :-
