• Static objects follow the standard document flow, and the top, right, bottom, and left attributes are invalidated.

  • Relative objects follow the standard document flow and are offset by attributes such as top, right, bottom, and left relative to the position of the object in the standard document flow, and can be defined using the Z-index hierarchy.

  • Absolute An object is removed from the standard document flow and is absolutely positioned (relative to the first parent element other than static) using attributes such as top, right, bottom, and left. A cascading relationship can also be defined using z-index.

  • Fixed objects are removed from the standard document flow and are absolutely positioned (relative to the browser window) using top, right, bottom, and left attributes and can be defined using the Z-index hierarchy.

Confused? (Confusing is fine, but the basic definitions above are expected to be fluent in a front-end interview), let’s take a look at the experiment to further understand.

  • Standard document flow Standard document flow is the default arrangement of elements when no other special CSS rules related to arrangement and positioning are used.

Elements in HTML documents can be divided into two broad categories: inline elements and block-level elements. 1. The inline element is a node in the DOM tree. It does not occupy a separate space, is attached to block-level elements, and has no area of its own for inline elements.

2. Block-level element, which is a node in the DOM tree. It is always presented as a block, and is arranged vertically with its siblings, extending automatically left and right until the boundary of the element containing it cannot be side by side horizontally.

The positioning principle of boxes in the standard flow: Margin controls the distance between boxes, while padding exists in the inside of boxes and does not involve the relationship and mutual influence with other boxes. Therefore, to accurately control the position of boxes, it is necessary to have a deeper understanding of margin. When two inline elements are next to each other, the distance between them is the right margin of the first element plus the left margin of the second element. For two vertically arranged block-level elements, the vertical distance between them is not the sum of the lower margin of the first element and the upper margin of the second element, but the larger of the two. This should be paid special attention to when actually making web pages. (3) Margin between nested boxes At this time, the margin of the child block is arranged according to the content of the parent block. (4) If margin is set to negative value, the block set to negative value will move in the opposite direction, or even cover the other block.

1. static

The default position value, no special position, follows the standard document flow without much explanation.



Figure 1: Standard document flow

2. relative



Figure 2: Relative positioning

As can be seen from Figure 2, relative refers to the position of the object in the standard document flow according to left and top. Left and top do not change the size of the object in the document flow.



Figure 3: Relative positioning

Figure 3 shows that when the margin attribute is set, the size of the object in the standard document flow changes. Similarly, the padding changes the size of the relative positioning object in the standard document flow, as shown in Figure 4.



Figure 4: Relative positioning

So far, relative is clear, but let’s look at the use of absolute.

3. absolute



Figure 5: Absolute positioning

As you can see from Figure 5, absolute positioning is taken away from the standard document flow, using left,top (or right,bottom) for absolute positioning relative to the first parent element other than static positioning. It is worth mentioning that when using absolute positioning, you must specify at least one of the left,top,right, and bottom attributes (otherwise the left/right/top/bottom attributes will use their default value auto, which will cause the object to comply with the standard document flow, Render immediately after the previous object, which is rendered as relative and takes up space in the document.

If both left/right attributes are set, left takes effect. Similarly, top takes effect when both top and bottom exist.



Figure 6: Absolute positioning



Figure 7: Absolute positioning

As can be seen from Figures 6 and 7, absolute is essentially positioned relative to the border of the first parent element other than static.

An absolute location object outside the viewable area causes a scrollbar to appear. Placing relative positioning objects outside of the viewable area, the scroll bar does not appear.

4. fixed



Figure 8: Fixed positioning

As can be seen from Figure 8, fixed positioning is also separated from the standard document flow. Different from Absolute, fixed is migrated according to the origin of the window, that is, it will not be migrated according to the scrolling of the scroll bar.

5. z-index

If two sibling elements have the same value for this attribute, the sequence in which they are streamed in the HTML document will cascade, with the last overwriting the first. Note that the z-index cannot be used to set the parent-child relationship. The child must be above and the parent must be below.

About position, above. In addition, the above experiments are done on jsfiddle.net/.