Complete Guide on Css Position
Document flow:-
Before knowing the position property, we need to know about document flow. that without using any kind of position property how these element takes their position by default on the page.
When you add elements to a web page, they will arrange themselves based on the rules defined by the document flow. There are two types of elements on a web page:-
Block-level elements:- A block level element always starts on a new line and take up the full width available. For example:-<div>,<nav>,<p>,<video>,<ul>,<li>,<header>,<footer>,<section>,<table>,<video>,<main>etc
Inline elements:- An inline element does not start on a new line and only takes up as much width as necessary. they are displayed within lines. For example:-<a>,<img>,<br>,<sub>,<sup>,<button>etc
Now let's know how to position property work in CSS..........
What is Position in Css?
The position property is used to manipulate the location of an element. it is used to specify where an element is displayed on the page. We use top, right, bottom and left properties to determine the final location of the element.
Types of Position:-
Static Position
Relative Position
Fixed Position
Absolute Position
Sticky Position
1. Static position:-
Static Position is the default type of positioning which is applied to every component inside the document.
We can not use left, right, top, bottom and z-index properties in this type of positioning.
In this positioning, HTML elements behave as they should in the normal flow of document.
2.Relative position:-
in simple words, it is relative to its normal position and will leave a gap in its normal position. It is used when we need to position an HTML element relative to its normal position. We can set the top, right, bottom, and left properties that will cause the element to adjust away from the normal position
Example:-
As is illustrated in the pen below. The default position of all the boxes in the above image is static. Now, we will change the position from static to relative of box 3. Here is the CSS used :
You can see in the image given below that box 3 has shifted from the top and left side relative to its normal position. If we use the relative position property then we can manipulate it from top bottom left right
3. Absolute position:-
An element with the absolute position will move according to the position of its parent element.
One of the most interesting properties is that the flow of the web page is not maintained in absolute positioning but focuses on the use of space
Ex:-
Now, we have changed the position of box 3 absolute. You can see in the image given below that box3 has moved from the top and left side of the page.
note:-In the absence of any parent element, the HTML element will be placed relative to the page.
4. Fixed position:-
In fixed Position HTML element is remove from the normal flow of the document. Its position is adjusted by left, right, top, and bottom properties. It is positioned relative to the initial containing block established by the viewport.
it is relative to the browser window. it is used when we want to keep an HTML element at a fixed spot no matter where on the page the user is.
Ex:-
Notice the box 3 fixed at the top right corner of the page in the image given below. when you scroll page the position of box-3 is fixed.
5.Sticky position:-
In sticky positions the element relative to the users scroll position and sticky position is the combination of the relative and fixed.
Behave similarly to relative positioning, maintained the flow or order of the webpage and not focus on space and follow the fixed property as well, which is not scrollable.
Ex:-
the box 2 sticky at the top of the page in the image given below. when you scroll page the position of box-2 is sticky.
Thanks for reading an amazing article and brushing up on your concepts.
Hope you understand the above concept.
See you in the text article till then Keep Learning and Keep coding............
