CSS Demo: position

Position is a CSS property that determines the placement of an element in a document. Play with the below settings to change the placement of the blue circle.

static places the element in the normal flow of the document. The offset values don't have an effect in this case.

relative places the element in the normal flow of the document, and offsets it using the offset values.

absolute places the element relative to the closest positioned ancestor, ignoring the normal flow of the document, and offsets it using the offset values.

fixed is too complicated to explain in a few lines. We recommend you check the MDN resources.

sticky places the element relative to the closest scrolling ancestor in the normal flow of the document, and offsets it using the offset values. 

.blue-circle {
  position: {{ position }};
  top: {{topOffset}}px;
  left: {{leftOffset}}px;
}