CSS Positioning Relative_ Course notes

Objective

Recently in the Mu class online with Zhang Xin Asahi Big God re-learn the CSS related knowledge, the following is the study notes and some personal understanding

relative restrictions on Absolute positioning

1. Limit absolute positioning absolute positioning of top, left, right, and bottom are relative to the nearest relative parent element.

2. The level priority of the limit level absolute positioning is lower than the level of its parent element relative positioning

3. Limit overflow absolute positioning can be unaffected by the parent container overflow, which can overflow, but after the parent element plus relative, the element can be positioned absolutely with the perfect package.

relative Self-positioning

1 relative to itself when relative uses top, left, right, and bottom to move the anchor, the values on these properties are relative to the position of the relative in the current document stream, relative to the absolute position relative to the relative parent element closest to it.

2 No intrusion when relative positioning displacement, similar to the displacement of the suspension effect, does not affect the other elements, that its weekend elements will not be adjusted for the displacement of the relative position, relative, other positioning may cause other elements of displacement (such as margin)

3 What if I set top bottom and left right at the same time? Absolute positioning is stretching, relative positioning is a struggle, in short it is top>bottom,left>right

relative level

1 Raising the stacking context when the hierarchy of two elements is the same, the level of the elements that are added to the relative in the document flow is higher, without overwriting the previous

2 new level context and level control when the z-index of relative positioning is auto, it is impossible to limit the level of the sub-element to absolute positioning, which is equivalent to zero in the relative position of the z-index. IE6/7 is not possible, since it is auto will also limit the absolute positioning

relative the principle of minimizing impact

The so-called minimize impact principle is to minimize the potential impact of the relative attribute on other elements or layouts

1 Avoid using relative absolute bit as far as possible without relying on relative positioning

2 Relative minimization principle separates the required elements from the large DOM structure

Outside chain:

http://www.imooc.com/learn/565

CSS Positioning Relative_ Course notes