Sinsing and you completely understand the relative positioning and absolute positioning in CSS

In front of me in the interpretation of CSS also said about the relative positioning and absolute positioning problems, helpless or some children's shoes to express confusion, so another blog, to explain in detail the relative positioning and absolute positioning, I hope to be able to my point of starlight, so that the latter less detours.

The so-called relative positioning, is set to the relative positioning of the element will offset a distance, the element remains the original style, it will retain the space of the HTML element, for example, we look at the following code:

. demo{position:relative;width:50px;height:50px;left:50px;}

It will appear in the relative original place to the right 50px, and the place where it was originally is empty.

The following is the absolute positioning, the so-called absolute positioning, that is, do not occupy space, if the original this place has HTML elements, then it will overlap, here needs special, but also I post this blog purpose, is to tell you, absolute positioning if the parent element contains, if the parent element does not have a positional property, It is positioned according to the body, so if it has a parent element, you must specify the positional property in the parent element, as in the following code:

：

There may be children's shoes asking, what if we don't specify the orientation of the parent element? Take a look at the following code, which line in the CSS code I commented out, the source code is as follows:

And then it's:


The above is my introduction of the absolute positioning and relative positioning of the problem, if you have any questions or puzzled, you can leave a message below, thank you.
Sinsing and you completely understand the relative positioning and absolute positioning in CSS