1. Attribute value of position

1. Static: default value. Without positioning, elements appear in normal display (it ignores top, bottom, left, right, z-index declarations). 2, relative: Generates positioned elements that move relative to their normal position. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes. Absolute: Generates an absolutely positioned element relative to the first parent element other than the position attribute defined as static. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes. Fixed: Generates an absolutely positioned element that is positioned relative to the browser window. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes. 5, Sticky: in the screen scope (viewport), the location of the element will not be affected by the location (set top, left and other attributes invalid), when the location of the element will be moved out of the offset range, the location will become fixed, according to the set left, top and other attributes into a fixed location effect.

In this article, we mainly explain relative and Absolute attribute values.

Second, the relative

1. Elements defined as relative can be moved out of the normal document flow, but their positions in the document flow remain. As shown below:

Third, absolute

The element that is positioned as absolute is also removed from the normal document flow and no longer occupies its own position in the document flow. As shown below:

The yellow background is absolute, the blue background is ordinary, and the red background is the parent element of both elements (the parent element is defined as relative). As shown, the absolute element is moved relative to the nearest parent element that defines the position attribute and whose value is not static (this parent element may not be its immediate parent). If none of its parents define a position property other than static, it will be moved relative to the browser display form element rather than the HTML tag element.

1. The parent element of absolute does not have position, but its grandparent does. Absolute moves relative to its grandparent.

Absolute’s parent element is set to position:static, and its grandparent element is set to position:relative. Absolute moves relative to its grandparent element.

Position :relative is set for the absolute element’s parent, and position:relative is set for the grandfather. Absolute element is moved relative to the parent.

4. The absolute element does not have position for its parent or grandfather, and the absolute element moves relative to the browser display form element (note: not the HTML element).

5. As shown in the figure below, when the movement attribute (left,right,top,bottom) is not set, the absolute element is in the normal layout position, just belongs to the state of “floating in the air”, does not occupy the document flow space.

Fourth, pay attention to

For absolute, if the parent of the absolute element does not define position except static, it is deprecated for the browser display form element instead of the HTML tag element.

body,html {
	margin-top:50px;
	height:300px;
}
div {
	width:200px;
	height:200px;
	background:red;
	position:absolute;
	top:20px;
}
Copy the code

If the div element is only 20px away from the top, it moves relative to the browser display window. 2. If the div element is 70px away from the top (margin-top:50px + top:20px), the div moves relative to the HTML element. 3. If the div element is 120px away from the top (HTML margin-top:50px + body margin-top:50px + top:20px), the div moves relative to the body element.

Code Portal: Case code by Madman0621 (@Madman0621) on CodePen.