CSS tips: Interpreting absolute and relative

Source: Internet
Author: User
Tags relative
css| Tips

Author Xiao Yi's blog:http://andymao.com/

Many friends asked me absolute and relative how to distinguish between, how to use? We all know that absolute is absolute positioning, relative is relative positioning, but what does this absolute and relative mean? Absolutely, where is the absolute and relative to what place? So what kind of characteristics do they have and what effect can they make? What kind of skill is there between the two? Here we'll come to one by one readings.

Absolute,css in the writing is: Position:absolute; He means absolute positioning, he is referring to the upper left corner of the browser, with top, right, BOTTOM, Zuo (hereinafter referred to as TRBL) for positioning, in the absence of a set TRBL, the default based on the parent to do the original point of Origin point. If you set the TRBL and the parent does not set the Position property, the current absolute is positioned as the original point in the upper-left corner of the browser, and the position is determined by TRBL.

Generally speaking, the center of the page with absolute error prone, because the Web page has been automatically adapted to the size of the resolution, and absolute will be the browser's upper-left corner of the original point, will not be the resolution of changes in the location. Many people make mistakes on this point. And the Web site left its characteristics and relative is very similar, but there are essential differences.

Relative,css in the writing is: position:relative; He means absolute relative positioning, he is referring to the original point of the parent as the original point, no parent to the original point of the body as the original point, with TRBL to locate, when the parent has padding and other CSS properties, The original point at the current level is positioned according to the original point of the parent content area.

Sometimes we also need to rely on Z-index to set the container's upper and lower relations, the larger the number of the top, the numerical range is the natural number. Of course there is a point to note that the parent-child relationship can not use Z-index to set up and down relationship, it must be the child in the upper parent.



Related Article

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.