To lay out a div using the Position property

relative positioning and absolute positioning

Positioning Tags: position
Include attribute: relative (relative) absolute (absolute)
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)

2.position:absolute; Represents absolute positioning, and the position is calculated based on the upper-left corner of the browser. Absolute positioning keeps elements out of the document flow and therefore does not occupy space. The layout of elements in a normal document flow is as if an absolutely positioned element does not exist. (Because the absolutely-positioned boxes are independent of the document flow, they can overwrite other elements on the page and can control its hierarchical order by Z-index.) The higher the value of the Z-index, the more it displays on the upper level. ）

3. The parent container uses relative positioning, and when the child element uses absolute positioning, the position of the element is no longer relative to the upper-left corner of the browser, but relative to the upper-left corner of the parent window

4. Relative positioning and absolute positioning need to be used with top, right, bottom and left to locate specific positions, these four properties only take effect when the element is used for positioning, otherwise invalid. In addition, these four properties can only use the adjacent two, can not be used on the use of the next, or use left, and use the right.

The following is the relative absolute layout of multiple p within a p:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
：