Summary of four methods of position positioning in CSS

This article describes four ways to summarize position positioning in CSS

1. positon:static; Static positioning ( default )

All elements in the standard document flow are statically positioned

2. positon:relative; Relative positioning

　　Not out of standard document flow, "Home stay pit, will act separation"

Features: If relative positioning is set and the top, left, right, and bottom properties are set, then the box will be offset in the original position of the box

The use of relative positioning: generally not used to do "gland effect", on two functions:

(1) Fine tuning elements

(2) Absolute positioning of the reference, sub-absolute father phase

The left and right can be used to describe the shift of the box, and the top and bottom can be used to describe the offset of the box.

position:relative;top:10px;left:10px;   Move right down 10px relative to original position

position:relative;top:-10px;left:-10px;   Move up 10px relative to original position

3. Position:absolute; Absolute positioning

　　Out of standard document flow

Features: (1) If this element does not have a parent element, then the future top, left, right, and bottom are positioned relative to the browser window

(2) If an absolutely positioned element has a parent element, but the parent element has no relative positioning, then the top, left, right, or bottom are positioned relative to the Browse window.

(3) If an absolutely positioned element has a parent element, and the parent element has a position (not static), then this absolutely positioned element offset is based on its own parent element

(4) An absolutely positioned element will not occupy a position on the page

4. position:fixed; Fixed positioning

Out of standard document flow

The purpose of fixed positioning: Some small ads on the page, need to be fixed in a position on the page unchanged

Summary: In the future when writing the page, the most used is not absolute positioning or relative positioning, but absolute positioning and relative positioning with the use of

Spec: Child absolute Parent (child element uses absolute positioning, parent element uses relative positioning)