Four usages of position attributes in div layout

Correct use of the Position property of the P layout property

Position's English intention is to refer to position, position and state. There is also the meaning of the placement. In the CSS layout, position plays a very important role, many of the container positioning is done with position.

The Position property has four optional values, namely, static, absolute, fixed, relative. We are going to learn about the different uses of each of them, and in learning we should consider which of them should be used in what layout situation.
For more information on position properties, please refer to here.

P position:static No positioning of layout properties

This property value is the default for all element positioning, in general, we do not need to declare it specifically, but sometimes we encounter inheritance, we do not want to comment on the attributes inherited by the element affect itself, so you can use Position:static to cancel the inheritance, that is, restore the default value of the element location.
such as: #nav {position:static;}

Position:absolute Absolute positioning of p layout attributes

With Position:absolute, you can move the element exactly where you want it, and let me move the NAV to the upper-right corner of the page. We can write this: nav{position:absolute;top:0;right:0;width:200px;}
The front or back layer of the NAV layer using absolute positioning will assume that the layer does not exist, that is, in the z direction, it is relatively independent, without affecting the other Z-directional layers. So Position:absolute is useful for placing an element in a fixed position, but it is useless if you need a layer to determine the position relative to the nearby layer. The relative positioning can only be used as discussed below.
Here's a winie bug to mention, that is, if you define a relative width for an absolutely positioned element, its width depends on the width of the parent element rather than the width of the entire page in IE.

The position:fixed of the P layout property relative to the fixed position of the window

What does this positional property value mean? An element is positioned in a similar way to absolute, but its containing block is the viewport itself. In screen media such as Web browsers, elements are not moved in a browser inspection when the document is scrolled. For example, it allows frame style layouts. In page media such as printouts, a fixed element appears in the same position on the first page. This can be used to generate a flow header or footnote. We have seen similar effects, but most of the results are not implemented by CSS, but by the use of JS scripts.
Note in particular that IE6 does not support the Position:fixed property in CSS. It's really a pity, otherwise we can try this cool effect.

Position:relative relative positioning of p layout properties

We can write this: #nav {position:relative;top:50px;left:50px;}
But you need to pay attention to the following situation, relative positioning immediately after his layer woaicss will not appear under the NAV, but with the nav has a certain overlap!