Web Road Note II-CSS positioning

CSS controls the location of each block element, tag is position, there are 4 kinds of attributes.

1. Static

The default property of the general Web page, which indicates that element is arranged according to the normal flow of the page, is also the default placement, so it is generally not written in the CSS file.

2. Absolute

Indicates that the element is removed from the normal flow of the page, where it would not have been retained, and moved relative to its nearest parent element. For example, in the body of a DIV is set to absolute, then the move is relative to the body of the block to move, if there is no parent element, it is moved according to the HTML element.

3. Fixed

Indicates that the element is removed from the normal flow of the page, where it is not retained, and is moved relative to the browser and other windows. It is important to note that this element does not move as the page scrolls, that is, to a fixed element, no matter how you slide the wheel, it does not move one step from the beginning when you see him. Use less, originally thought can be used to fix the background picture, but because the background picture is set under the BODY element, so there is no way to set the background image separately fixed.

4. Relative

The relative correlation here is related to where the element originally belonged in the normal flow of the page, that is, if only the position:relative is set and the element's top is not set. There is no difference between the displayed effect and the default static. In addition, after the four-week parameter is set, the position is left blank even though it was moved, which means that he still exists in the normal flow of the page.

It is important to note that the relevant element is set Z-index in any case and cannot be placed above the static element; the other point is limits the scope of absolutely positioned child elements , the sentence still needs to be understood.

In addition, moving out of the page normal stream fixed and absolute element will overwrite the other positioned element, and you can modify it by using the Z-index property when you do not want to overwrite it.

The Z-index property determines the order of an element within the stack, the larger the upper layer. When the two element is covered in the same place, the higher the HTML is, the more it is displayed first. It is important to note that Z-index only works on an element other than static! That is, if it is always static and cannot change the order of display with z-index compared to the (default) static element.

Reference: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Http://www.w3schools.com/cssref/pr_pos_z-index.asp

Http://www.w3schools.com/css/css_positioning.asp

Web Road Note II-CSS positioning