HOW TO POSITION ELEMENTS IN CSS?

The CSS positioning property is used to set positions for various elements. These are also used to place an element behind another and are also useful for the scripted animation effect.

An element can be easily positioned using the top, bottom, left, and right properties. In order to efficiently use these properties, the position property is required to be set first.

WHAT ARE SOME POSITIONING PROPERTIES?

Here, we will be having a look at some of the most basic positioning properties that include static, fixed, relative, and absolute positioning.

• STATIC

  By default, all HTML elements have static positioning. It always positions an element according to the normal flow of the page. It is not affected by the top, bottom, left, and right properties.

Example:

• FIXED

  Fixed positioning allows you to fix the position of an element at a particular place on the page, the element stays fixed on the spot, irrespective of scrolling. The fixed property will be positioned relative to the viewport. We can set the position of the element using the top, right, bottom, and left.

Example:

• ABSOLUTE

  An element with position: absolute is positioned at the specified coordinates relative to the nearest parent which is not static. The position of this element is not affected by its siblings.

Example:

• RELATIVE

  Relative positioning sets the position of the HTML element relative to where it appears normally. An element with its position set to relative and when adjusted using top, bottom, left, and right will be positioned relative to its original position.

Example:

--And, that would be it for this one! Thanks for visiting, Hope this was helpful!--