CSS positioning property
Posted By: Akash Singh Published: 14, Jan 2024
INTRODUCTION OF CSS POSITION PROPERTY
According to the CSS box model ,each HTML element is Square Box .Which is made up of Margin, Border, Padding , and Content.
When Elements are defined in a webpage ,they are defined in sequence one after the other ,And all these elements show in this order. This is the default position of the elements But this default position can be changed by CSS Position Property .Web designers can determine the position position of each element of HTML according to their need . With which you can design the desired layout.
There are different types of Position properties.
Static: The Default Position top/bottom/left/right/z-index has no effect.
<body>
<div>
<img src="you can take any image url or link>
<p>This Is paragraph .This paragraph is defined after an image .and it is showing after that image
.This is default position</p>
</div>
</body> p{
border:1px solid red ;
position: static;
}
Absolute: The element is removed from the flows if it is relative positioned to its first non-static ancestor top/bottom etc works.
<body>
<div>
<img src="you can take any image url or link>
<p>This Is paragraph .This paragraph is defined after an image .and it is showing after that image
.This is default position</p>
</div>
</body> p{
border:1px solid red ;
position: absolute;
right:50px;
bottom:50px
height:50px;
}
Fixed: Just like absolute properties except the element is positioned relative to the browser window.
<body>
<div>
<img src="you can take any image url or link>
<p>This Is paragraph .This paragraph is defined after an image .and it is showing after that image
.This is deafault position</p>
</div>
</body>
p{
border: 1px solid red ;
position: fixed;
bottom:100px;
right:0;
}
Sticky: The Element is positioned based on user's scroll position.
Z-index : The z-index property specifies the stack order of an element .It defines Which layer will be above and which iin case of overlapping.