(Absolute: generates absolutely positioned elements)
attribute is used to position a predetermined target type and mode elements
①position: static default value, it is not located, elements that appear in the normal stream;
②position: fixed is fixedly positioned relative to the browser window to locate;
③position: relative relative positioning itself relative to its normal position to locate its original space occupied by the remains;
④position: absolute absolute positioning relative to the first parent element of targeting method is not static positioning (reference element looking up, up until the root element, ie body), this time the original space occupied by the elements in the normal flow of the document will be Close, like elements originally not present, the absolute positioning block generates a block level, regardless of what type originally in the normal stream.
Can be set by setting the position of the element top / right / bottom / left after the selected positioning mode, but useless static, the static margin position is moved by position.
Note: When the element is set position: the absolute, with a think margin: 0px auto; to make the middle level is invalid element, can be set as follows:
<style>
.s1{width:100%;height:100%;position:relative;}
{background .s2: Yellow; width: 300px by; height: 100px; position: Absolute; left: 50%; margin-left: -150px; // is to allow an element to its parent element positioned opposite the left
distance for the parent element 50% of the width, when the left boundary line is halfway parent element, then the width of a left
half right center, i.e. re-set Top margin : -150px can be horizontally centered top: 50%; margin-top : -50px; // the same principle described above, the vertically disposed center }
</ style>
<body>
<div class="s1">
<div class="s2">
水平居中
</div>
</div>
</body>