Some CSS concepts

                                        Some CSS concepts

CSS position property
The position in CSS is a property of an element that specifies the type of positioning method of that element. These positioning methods can be static, relative, absolute, fixed and sticky.
1) Static Position: It is the default position of an element. Element renders in order as their appearance in the document flow.
2) Relative Position: The element is positioned relative to its original position.An element can be adjusted away from its normal position by setting the top, bottom, right, left properties.
3) Absolute Position: The element is positioned relative to its parent or ancestor element. The values of left, right, top, bottom determine the final position of the element.
4) Fixed Position: The element is positioned relative to the viewport or the browser window. Fixed positioned element stays in the same place even if the page is scrolled by the user. The top, bottom, right, left properties are used to position the element.
5) Sticky Position: The element is positioned based on the user's scrolling. This position is a hybrid between relative and fixed or in other words, it toggles between relative and fixed position and depends on the scroll position. An element that is sticky positioned, is positioned relative until the given position is met in the document flow or viewport and then it sticks at the same position like fixed positioning.

Difference between inline, inline-block, and block
Inline element: An inline element does not start on a new line, rather it sits next to the previous inline element. It only occupies the space it needs rather than occupying the whole space available.

, , , ,
, , etc are some inline elements. An inline element cannot contain a block element. We cannot set the height, width, margin top and bottom of an inline element. But we can set margin right and margin left of an inline element.
Block element: A block element starts on a new line and occupies the whole space available. We can set height, width, margin and padding to a block element. , , ,

,

-

, , etc are some block elements.
Inline-block element: Inline-block elements don’t add line break after an element so the element can sit next to the other element. Inline-block doesn’t start on a new line Again inline-block allows setting height and width of an element. By declaring inline elements as inline-block, we can set height and width of inline elements. , , select and textarea are inline-block elements.