What is the positioning of CSS? Summary of CSS Positioning

What this article brings to you is about the positioning of CSS. CSS positioning Summary, there is a certain reference value, there is a need for friends to refer to, I hope you have some help.

The positioning is divided into:

static (default): This is the default value for the page element position property, and the elements are arranged according to the browser's arrangement rules for the elements in the page.

Note: Setting Left,right,top,bottom for an element at this point does not have any effect.

relative (relative positioning): position relative to its original position! If the position is not previously set or the position value is static, the position of the element's Left,right,top,bottom is moved by reference to its original position after the relative is set.

Absolute (absolute positioning): This should all be understood, that is, the location of the document flow away from. Locate the reference as your own parent, but your parent must have the Position property (the parent position property is static and must be one of the absolute,relative,fixed). If your parent does not set the Position property, the ancestor element that has the position property and is not static is searched upward until the BODY element.

Fixed position : This property is the element that is positioned relative to the browser window , and no matter how you move your slider, it will be fixed in a fixed position relative to the browser window, also note that Its sibling element will ignore its presence in the placement of the position. The top,bottom,left,right used at this time is also relative to the browser window.

Share my experience below:

1. Fixed will produce compatibility problems, old IE6 not support, he is relative to the browser to locate!

2. The parent element has the Position property (not static) and the padding value, and if the child element is set only absolute then the padding value of the parent element is not ignored , and if left:0 is set, top:0 ignores the padding value of the parent element.

3. Share a horizontal centering method for an element that has the absolute attribute:

Method One: Usually we are using left:50%, and then MARGIN-LEFT:-WIDTH/2 to set the horizontal center, the following share a method, if asked in the interview of the horizontal center method, you can add the following kind, add sub-item!

Method Two: Set child elements: left:0,right:0, then set margin:0 Auto to center horizontally.

4. We should pay attention to set the position and then set the float, margin will have any changes, this is very important to discuss with you later.