CSS Positioning (position)

Begin

Position in CSS is a very important property, there are static,absolute,relative,fixed these values, the specific difference is as follows

Detailed default positioning (static)

1. Without setting the position, the default is static, that is, the block is arranged in the layout of the document flow, a block takes one line, and the code and layout are as follows

2. When you add top,left positioning to the D3 style, you will find that the layout does not change, and the code and layout are as follows

Absolute Positioning (absolute)

Out-of-document flow does not occupy a single line, and its orientation is only affected by Top,right,left,bottom. So the absolute positioning of the top,right,left,bottom is relative to what is positioning it? There are two scenarios:

(1) When the parent element is not positioned, it is positioned relative to the body, and the specific code layout is shown below.

(2) The parent element is positioned (absolute,relative,fixed), relative to the parent element

Relative positioning (relative)

1. Without leaving the document Stream, the block will be filled with a single line, and the orientation will only be affected by Top,right,left,bottom.

2. So why is the top margin with the parent element 250px, because the blue box is not out of the document flow, a separate line, so more 100px, the top margin is 250px, we use float out of the document flow, float usage can refer to the tutorial on W3school

3. Below we add the anchor on the parent element and find that nothing has changed.

Fixed positioning

1. Out of the flow of the document, the block does not occupy a single line, and the Top,right,left,bottom will only be positioned relative to the body.

2. Add the position location of the parent element and find that the layout has not changed

Note: This article is original work, if there is a reference will be mentioned in the text, if there is omission, involving infringement, please contact me, will be amended immediately.

CSS Positioning (position)