HTML relative positioning absolute positioning

Confucius said: "Wen so know the new, can be a teacher." "These days I took a free front-end class and had a live broadcast every night, explaining an independent case. In listening to the front-end basis, found that they have a lot of things did not learn, usually in school although the HTML also wrote a lot, but a good freshman part is ignored. Just now read a basic case, it is very sympathetic, a simple carousel diagram, involved in a lot of things. Have to say, professional is professional.

Well, don't say much, just go dry. Often do page rendering of the package may encounter a problem, position relative positioning and absolute positioning. This question seems very simple, is not a positioning it, what? Don't worry, we'll look down slowly. There is a saying on the internet that the son is a father. That is, the child element sets absolute positioning, and the parent element sets relative positioning. You can then set the Top,left value for the child element to control the position. This is actually a very wrong idea, which completely distorts the definition. The landlord before the school to write the page when also made a similar error, as long as the effect of the line, the tube of what principle it, the results of each encounter positioning problems are jammed. Check half a day also can't remember, in order to thoroughly understand this, specially spend time to write this post.

Relative is also relative positioning: it is offset relative to its position. Just look at yourself and not look at the other.

Absolute absolute positioning: position offsets relative to non-static ancestor elements, and when such elements do not exist, they are positioned relative to the root-level container.

In the case of a carousel diagram, the HTML code:

<divclass="Banner"><!--S banner--> <divclass="BANNER-BG"> "images/1.jpg"> </div> <divclass="BANNER-BG"> "images/2.jpg"> </div> <divclass="BANNER-BG"> "images/3.jpg"> </div></div>
<div class= "nav" ><!--navigation buttons, note that this is used for <i> labels--
<i></i>

<i></i>

<i></i>

</div><! --e banner-->

CSS code:

Banner is the parent of BANNER-BG and then sets a Position:absolute property for banner. According to the rules absolute to find his non-static ancestor elements, we want to make BANNER-BG these several carousel map is fixed on the top, so we need to add a position:relative property to the Carousel container banner. This sets the left:0;top:0; it will be positioned to banner. While not setting the banner relative property can also put the picture to the top, but in that case, BANNER-BG looking for root-level element html, this is not the effect we want. To add a position:relative attribute to the element you want to locate, in order to avoid errors in the future.

said so much, in fact, when absolute positioning, it depends on which parent element you want to navigate to, add the relative attribute to which element. Instead of blindly trying to set up those sons and fathers or something. Understanding the principle is the positive solution. Hope to help the people who need it, spent an afternoon finishing, afraid that some definitions do not understand, editorial blog is a learning process, in the spirit of responsibility for others, write out the things must be sure to confirm the correct after only dare to publish. There are shortcomings in the welcome point.