Frontend Disscussion

Payilagam: 05-March-2025

Topic: Frontend Discussion

Position's are playing major role in designing a website. Several positions are available in css to make the work easier, they are:

1. static
2. relative
3. absolute
4. fixed
5. sticky

1. Static:
   In HTML, every element's default position was Static, there is no need to define it explicitly.
   We cannot move these static elements abruptly to our wish, because it holds the entire line space in its row.

2. Relative:
   To move the HTML elements without restrictions, we can use the relative position, it breaks the the static nature of the element and make it available for movement.

3. Absolute.
   It is used to maintain the z-axis of an elements and also the x & y axis values in the web page. It is able to interfere with the other elements.
   When we move the element with the offset values, it calculate the offset values from its non-static parent, if a non-static parent is not found, then it takes from the body element.

4. Fixed.

   It is used same as the Absolute but with minor changes.

5. Sticky.

   It is present in its origin position until its reach the offset position.

Z-index - It is one of the css property which is used to define the z-axis level of the element. It is works on the elements which has absolute, fixed, sticky positions.