CSS (vi) element positioning (position)

Main contents of this chapter

Positioning introduction

Static positioning

Relative positioning

Absolute positioning

Fixed positioning

Sticky positioning

I. Introduction of Position

The Position property applies to any element;

Second, the default positioning (position:static)A, the role:

• Is that the element is positioned in the natural flow, the upper and lower left and right offsets are invalid (the default property), and the regression is true;

B, Features:

• Ignore offsets for top, bottom, right, left, or Z-index
• Two non-floating adjacent elements if the margin is set (margin) then the final margin = The largest of the two
• non-floating block-level elements if the width and height are set, and the left and right positions of static are auto, the left-right margin will automatically split the entire remaining width, the elements are automatically horizontally centered;

third, relative positioning (position:relative)A, the role:

• A reference was made to the absolute positioning of the sub-element (absolute);

B, Features:

• You can use top, bottom, left, right, or z-index to position the offset relative to yourself;
• Relatively positioned elements do not leave the natural flow
• Any element can be set relative, his descendants can be relative to his absolute positioning;
• Z-index can sort the stacked elements

Iv. Absolute Positioning (position:absolute)A, the role:

• The element deviates from the natural flow for positioning;

B, Features:

• Leaving elements out of the natural flow;
• If the parent and the element do not have a relative attribute, then the body is positioned as a reference;
• The element is set width and height, and the four-directional positioning offset is 0, and the Margin:auto is centered;
• If the element does not have width and height, and the four orientation offset is 0, the child element is coincident with the parent element of the relative;

Five, fixed (position:fixed)A, the role:

• and absolute very similar, fixed reference is the viewport, absolute reference is relative;

B, Features:

• Fixed on the viewport, does not change the position with the sliding wheel;

Six, Tile (position:sticky)A, the role:

• The perfect combination of relative and fixed, to create the effect of adsorption;

B, Features:

• Offset, the position is still in the natural flow;
• The reference is the parent element of the property with scrolling, and the viewport is selected without scrolling property;

CSS (vi) element positioning (position)