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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.