About HTML, absolute positioning, relative positioning of the understanding ... (Learn small records in HTML process)

about HTML, absolute positioning, relative positioning of the understanding ... (Learn small records in HTML process) Wang Coli (Star stars)

In HTML

relative positioning: position:relative;

absolute positioning:position:absolut;

1. Relative positioning (the relationship between Div and Div)

Body tag is actually a large box, inside the body set two boxes Div1 and Div2, and two boxes gave it a relative positioning:position:relative;, then Div2 will be relative to the DIV1 typesetting , in the div1 below, if Div2 gave a floating float:left, then Div2 will be side with DIV1.

If on the basis above, DIV1 and div2 inside all add a sub-box, DIV1 inside there is a div3,div2 inside there is a div4, relative to Div3 and div4 also give relative positioning, DIV3 will relative DIV1 this parent class to relative positioning , thediv4 will be relative to the div2 of the parent class.

If the div1 inside also has a div3 and a div4, Div3 and Div4 will be in the div1 of the parent of the relative positioning, and div2 no direct impact.

2. Absolute positioning (the relationship between Div and Div)

absolute positioning needs to remember the formula is:

1. Absolute positioning will find the closest parent class to its location, not its own parent.

2. After the absolute positioning of the parent class has been found, it depends on whether the parent class has been relatively positioned, there is no relative positioning, it will not find the parent class to locate.

Summary: absolute positioning looks for a parent that is closest to itself, and the parent is positioned relative to it, and the box will look for a parent class that already has a relative positioning.

Examples are as follows:

The body tag defines the box Div1,div1 contains Div2, Div2 contains Div3.

Case 1:div1, div2 box are set relative positioning, Div3 set absolute positioning.

Analysis:body, Div1, Div2 are div3 of the parent class, and the distance div3 the nearest parent class is Div2, so Div3 will be in the div2 inside absolute positioning.

Case 2:Div1 Set relative positioning, div2 not set relative positioning, Div3 set absolute positioning.

Analysis:body, Div1, Div2 are Div3 parent class, distance Div3 The nearest parent class is Div2, but Div2 does not set relative positioning, so we continue to find the relative positioning of the parent class, DIV1 is the parent of div3, the relative positioning of the parent class The nearest one, then it will be in the div1 inside the absolute positioning.

This is my own in the study summarizes some of the Web page related typesetting positioning skills, hope can be helpful to everyone. There is no shortage, by everyone to add. Thank you..

About HTML, absolute positioning, relative positioning of the understanding ... (Learn small records in HTML process)