CSS Position (Position)

The CSS position attribute is used to specify how an element is positioned on the page, and there are several ways to position elements using CSS Position (Positioning): static positioning (static), absolute positioning (absolute), relative positioning (relative), and fixed positioning (fixed).

CSS positioning methods

Properly positioning elements on a webpage is necessary for good layout design. There are several methods available in CSS for positioning elements. The next section will introduce these positioning methods one by one.

Static positioning (static)

Static positioning elements are always positioned according to the normal flow of the page. HTML elements are in static position by default. Static positioning elements do not affecttop,bottom,left,right, andz-indexFeature.

If the position attribute value of an element is not specified, that is, in the default case, the element is in static positioning. Any HTML object that supports the position attribute is set to static by default. Static is the default value of the position attribute, indicating that the block remains in its original position and does not reposition.
In fact, we rarely use 'position:static' in daily use, but sometimes when we use JavaScript to control the positioning of elements, if we want to make other positioning elements become static, we need to use 'position:static;' to achieve this.

.box {
　　　　padding:　20px;
　　　　background: #7dc765;
}

Relative Positioning (relative)

relatively positioned elements are positioned relative to their normal position.

In the relative positioning scheme, the position of the element's box is calculated based on the normal flow. Then, based on the attribute- top or bottom and/or left to move the box away from the normal position right.

.box {
　　　　position: relative;
　　　　left:　100px;
}

Absolute Positioning (absolute)

Absolutely positioned elements are positioned relative to the first parent element with a non-static position. If such an element is not found, it is placed at the page relative to the top-left corner of the browser window. The offset properties that can be further used are one or more specified top, right, bottom, and left.

Absolutely positioned elements are completely removed from the normal flow, so they do not occupy space when placing sibling elements. However, depending onz-indexproperty value, which can overlap with other elements. In addition, absolutely positioned elements can havemarginand they do not collapse with any other margin.

.box {
　　　　position: fixed;
　　　　top:　200px;
　　　　left:　100px;
}

Fixed Positioning (fixed)

Fixed positioning is a subclass of absolute positioning.

The only difference is that fixed positioning elements are fixed relative to the viewport of the browser and do not move when scrolling.

.box {
　　　　position: fixed;
　　　　top:　200px;
　　　　left:　100px;
}