Relative positioning and absolute positioning in div

1.position:relative; If you are relative to an element, first it will appear where it is located. It then moves the element "relative to" its original starting point by setting the vertical or horizontal position. (again, relative positioning, regardless of whether or not to move, the element still occupies the original space.) Therefore, moving an element causes it to overwrite other boxes) For example: #mybox{position:relative; left:20px; top:20px; the effect is to move the layer down and to the left by 20px.

2.position:absolute; Represents absolute positioning, where the position is calculated based on the 0 point in the upper-left corner of the browser, and absolute positioning makes the element irrelevant to the document flow and therefore does not occupy space. The layout of this element in a normal document stream is as if an absolutely positioned element does not exist. It is relative to the most recently positioned ancestor element . If an element does not have an ancestor element that has been positioned, its position is relative to the original containing block. Depending on the user agent, the original containing block might be the canvas thing HTML element. (because absolutely positioned boxes are not related to document flow, they can overwrite other elements on the page and can control the stacking order of these boxes through Z-index.) The higher the value of the Z-index, the higher the box's position in the heap. Then there is a problem, and now we do most of the Web page is centered, then I need this element to follow the page of an element location regardless of the resolution is how much of his position is always for an element within the page, then the simple absolute is not. The correct solution is to define the element's parent element as position:relative; (correct: This can be a grandparent or position:absolute;) the element that requires absolute positioning is set to Position:absolute; Then set the value of the top,right,bottom,left, so that its positioning of the reference standard is the upper left corner of the parent padding the upper left side!

Relative positioning and absolute positioning in div