CSS tips: Interpreting absolute and 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.