Multan Institute of Information Technology
CSS POSITIONS
Positions In CSS
Positions is used to place the elements on the web page and decide the behavior of the element when we resize or scroll the page.
- We can arrange the element exactly where we want
- We can easily manage the layout of website like sidebar, models and the navbar
- We can manage the website when we resize the screen
- We can make design that are overlap at each other and we can control them by giving z index (Greater the Z-indez,placed element on front and vice versa)
- We can use positions to make beautiful animations in the web pages that looks more attractive and efficient
TYPES OF POSITIONS IN CSS
1) Static Position
It is the default position of the element in the web page. It positioned normally on the web flow and the content will scroll up and we scroll the page
2) Relative Postion
We can move the element from top,bottom,right, left from the original position of the element (Relative position)
3) Absolute Position
We can place the element on any position of web page by giving them top bottom left right but it will take his position from its main parent like the body
If we make top 0 then the element goes to the Top of the body as 0 position. We can also change then by giving the relative positions to the parent of that element
4) Fixed Position
This position is used to stuck the element on the page that it will not scroll by the scrolling of the page. As a result it will be fixed in his position and scrolling doesn’t effect his position
SUMMARY
In short css position gives us control and flexibility to manage our design layout and the pattern of the website which is better for the user interface and easy to manage
