In CSS, there are several position properties that control the positioning of elements on a web page. Let's explore each of these position properties with examples: 1. position: This property specifies the positioning method for an element. It can take several values: - `static`: This is the default value, and elements are positioned according to the normal document flow. - `relative`: Elements are positioned relative to their normal position. You can use the `top`, `bottom`, `left`, and `right` properties to offset the element from its original position. - `absolute`: Elements are positioned relative to the nearest positioned ancestor or the containing block. If there is no positioned ancestor, it will be positioned relative to the initial containing block (usually the `` element). - `fixed`: Elements are positioned relative to the viewport and do not move even if the page is scrolled. - `sticky`: Elements are positioned based on the user's scroll position. It toggles between 'relative' and 'fixed'. It behaves like `relative` within its container until a specific offset threshold is reached, after which it behaves like `fixed`. Here are some examples illustrating the usage of CSS position properties: 

/* Example 1: Relative positioning */
.relative-box {
  position: relative;
  top: 20px;
  left: 50px;
}

/* Example 2: Absolute positioning */
.absolute-box {
  position: absolute;
  top: 50px;
  left: 100px;
}

/* Example 3: Fixed positioning */
.fixed-box {
  position: fixed;
  top: 20px;
  right: 20px;
}

/* Example 4: Sticky positioning */
.sticky-box {
  position: sticky;
  top: 50px;
}

.container {
  height: 2000px; /* To create a scrollable container for sticky positioning */
}
In Example 1, the `.relative-box` element is positioned relative to its normal position. It is shifted 20 pixels down from its original position and 50 pixels to the right. In Example 2, the `.absolute-box` element is positioned relative to its closest positioned ancestor or the containing block. It is shifted 50 pixels down from the top edge and 100 pixels to the right from the left edge of its container. In Example 3, the `.fixed-box` element is positioned relative to the viewport. It remains fixed in its position, regardless of scrolling. It is placed 20 pixels down from the top and 20 pixels from the right edge of the viewport. In Example 4, the `.sticky-box` element is initially positioned according to the normal flow of the document. Once the user scrolls past the offset of 50 pixels from the top edge of its containing block (in this case, the `.container`), it becomes "sticky" and behaves like `fixed`, remaining fixed at that position while scrolling. These examples demonstrate how CSS position properties can be used to control the positioning of elements on a web page.