This is the third day of my participation in the August Challenge. for more details, see: August Challengehas been three days

(The basics are often referred to as 3: Common features of positioning in CSS) Recently, many requirements are about positioning, so I think it is necessary to share the positioning with you here!

A. relative B. relative C. relative D. relative

(1) The relative positioning element is not off target and will occupy the original position. (2) The relative positioning element is offset, always based on its own position

2. Absolute positioning: Absolute

(1) Elements of absolute positioning will be off standard, out of control of the standard flow, will not occupy the original position ②. For absolutely positioned elements, if none of the parent elements of the absolutely positioned element is positioned, the position offset is browser based (it will scroll with the browser’s scrollbar) ③. For an absolutely located element, if the parent of the absolutely located element has a position, the position offset is based on the position offset ④ of the parent element nearest to it. The absolute position of the block element, does not default the width of the parent element, the default width and height is 0, the content will open the box ⑥. The width and height can now be set for the inline elements that are absolutely positioned

3. Fixed positioning: fixed

(1) Fixed positioning elements will be off standard, out of control of the standard flow, will not occupy the original position ②. Fixed positioning of elements, position offset browser-based visual window (does not scroll with the browser’s scroll bar) ③. (4) The width of a fixed block element is not the default width of the parent element, but the default width and height are 0, and the content will open the box (5). Fixed positioning of inline elements, you can set width and height

4. Static positioning: static

(1) The default positioning of elements (2)


If there is anything wrong, please feel free to comment below,