Detailed description of positioning and application in web design

Positioning has always been a difficult point in WEB standard applications. If you cannot clearly identify it, the effects that should be achieved may not be achieved, and the effects may be different. If the positioning principle is clarified, the positioning will make the web page more perfect.
Definition of positioning:
In CSS, the positioning content is: position: relative | absolute | static | fixed.
Static does not have special settings. It follows basic positioning rules and cannot be hierarchical using z-index.
Relative is not separated from the document stream. Based on its own static position, it locates through top, bottom, left, right, and hierarchical classification can be performed through z-index.
Absolute disconnects from the document stream and locates through top, bottom, left, right. Select the most recent parent-level positioning element. When the parent-level position is static, the absolute element is located at the origin of the body coordinate, and can be hierarchical using z-index.
Fixed positioning. Here, the fixed pair is like a visible window, not a body or a parent element. You can perform hierarchical classification using z-index.
Cascading classification in CSS: z-index: auto | namber;
Auto follows the positioning of its parent object
Namber has no integer unit. Negative
Positioning principle:
Element that can be displaced (relative positioning)
In the stream of this article, any element is limited by the position of the text stream, but through CSS we still make these elements can change their position, we can use float to let the elements float, or we can use margin to let the elements generate positions move. But in fact it is not a real shift, because it is only a blind eye that is achieved by increasing the margin value. In the true sense, the displacement is achieved through top, right, bottom, left (hereinafter referred to as TRBL, TRBL can be used in different folds .) Generated for a relatively located element. Let's look at the figure below:
We can see that the figure shows an element with a width of 200px, a height of 50px, a margin: 25px, a border: 25px solid #333, and a padding: 25px element with a relative positioning distance of 50px, 50 px left. The lower part is a default black block. We can see that this part of the block in the text stream is blocked by the relative positioning above. This shows: "When the element is set to relative positioning or absolute positioning, it will automatically generate a stack, their Cascade level is naturally higher than the text stream ". Unless its z-index value is set to a negative value, it is not displayed when the z-index value is a negative value in Firefox and other browsers. In addition, we found that when the relative positioning element is displaced, the content of the expression is already out of the text stream, in this article, we only leave the original total width and total height for the original relative positioning (the content height or width plus the value of marginorderpadding ). This indicates that in relative positioning, although the presentation area is out of the original text stream, there is still an old location in the text stream.