position: relative property in CSS

In CSS, the position: relative property is used to position an element relative to its normal position on the page. When an element is positioned relatively, it is moved from its original position by the specified amount in any direction, but it still takes up the same space in the document flow.

To use position: relative, you first need to specify a position value for the element. This is typically done using the top, right, bottom, and left properties. These properties determine how far the element should be moved from its original position in the respective direction.

For example, consider the following CSS code:

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

In this example, the .box element is moved 10 pixels down and 20 pixels to the right of its original position on the page.

It’s worth noting that any child elements of a relatively positioned element will be positioned relative to their parent element, rather than the document flow. This can be useful for creating complex layouts where elements need to be positioned relative to each other.

Overall, position: relative is a powerful tool for positioning elements on a webpage, and it can be combined with other CSS properties to create a wide range of layouts and designs.