CSS element position positioning and Z-index

Page element positioning

1. Note the point:

1) Be careful to set the height of the element, unless you set the height of a picture of a known size, you cannot know how high the specified element will be on the page. At this time, it is best to control the height by padding.

2) for the same element, do not talk about the float property and any one of the positioning methods (static,absolute,relative,fixed) in combination (but the Grail layout seems to have the example of combining float with position:relative, Although through their own tests, there seems to be no need for it)

The 2.CSS provides four types of positioning:

1) Statically positioned static: This is the default positioning method of the browser, which arranges the page flow in a simple top-to-bottom order.

2) Absolute positioning absolute: leaves the page element out of the page stream and places it on the top of the page, sometimes blocking other content. If the position of a label is absolute, and it is not in any element that sets the absolute,relative,fixed positioning, then it is positioned relative to the browser's window. If a label is in a label that sets the absolute,relative,fixed positioning, it is positioned relative to the edge of the peripheral element.

3) Relative positioning relative: Allows the element to be positioned relative to its default position on the page and leaves a hole in the position before the element is positioned relative to it. Therefore, the advantage of relative positioning is not to move the element (this is achieved by absolute positioning), but to its internal elements to set a new reference point, at this time the relative positioning means "compared to me" positioning, that is, set the relative attribute of the peripheral elements, to obtain an absolute positioning, The element in which the element is positioned is given relative positioning against the edge of the element.

4) Fixed FIX: Locked to a location on the screen, always positioned relative to body, similar to background-attachment:fixed. When a user scrolls an element, the fixed element remains unchanged on the page.

Note:

1) The above positioning , set position:relative and Position:absolute (premise!) ) can enable the element to activate the Left,top,right,bottom and Z-index properties (although the Web page is two-dimensional, in fact there is a z-axis, the size is controlled by the Z-index), by default, all elements are z-index=0 this layer, this is the document flow, Setting position:relative and Position:absolute will make the elements float, meaning z-index>0. The difference is that Position:relavtive retains its own position in the z:index=0 layer, although it has no effect on other z:index=0 layers, while Position:ablolute is completely out of the document stream and does not retain a placeholder in the z-index:0 layer , the other elements will occupy the original position of the element, resulting in overlapping effects.

2) Float also changes the flow of the document, unlike the float property, which does not float the element to another Z-index layer, still causes the element to be arranged in the z-index=0 layer, and other elements will surround the element. Also for this reason, float cannot be used in conjunction with any of the positioning methods.

3) All in all, for the position:absolute element, completely out of the original layer, the original layer in the actual occupy height and width are 0; for position:relative elements, still occupy the original height and width, if set top, A hole is formed when left is not 0. For floating elements, where the original layer actually occupies a height of 0, the width remains (this is why the floating element bulges, the parent element needs to be set Overflow:hidden to support its parent element). For each of these elements, its height and width are open by the inner elements, or the width is set by a person.

3, Element stacking

Z-index:-1; The larger the value, the closer to the top level, and the negative numbers (negative numbers that are not supported before IE7) can be used.

On the issue of stacking multiple elements, in addition to setting the position to relative or absolute activates the z-index, there is a special case that does not activate Z-index, but still causes the elements to overlap, which is: negative margins.

CSS element position positioning and Z-index