Position attribute in CSS

You may find this title very simple. It is indeed an article about the position attribute basics in CSS.ArticleBut you may not know the details about position.

1. Introduction
Position has five attributes: static | relative | absolute | fixed | inherit
Static and inherit: nothing worth introducing.
Relative: relative to the positioning of the element itself.
Absolute: positioning of contained blocks.
Fixed: position relative to the window.

2. Contain Blocks

The contained block is the top | right | bottom | left reference element.
The inclusion block of absolute refers to the parent element closest to the element with positioning settings, that is, the recent position attribute value is not a static ancestor element. For example:

 

  < Body  >  
  <  Div  ID  = "Outer"  Style  = "Position: absolute"  >  
  <  Div  ID  = "Inner"  >  
 <  Span  Style  = "Position: absolute"  >  Span  </  Span  >  
  </  Div  >  
  </  Div  > 
  </  Body  >  
 

For a span element, its contained block is # outer, not # Inner, because # outer sets position: absolute. It is worth noting that as long as # outer sets absolute | relative | the "locate parent element" of the fixed span element is # outer. If outer does not set one of the three attributes, the contained block of span is an HTML element.

Relative blocks refer to the elements themselves.

3. Top | right | bottom | left details.
Maybe you will take for granted the details of these values, and you will be wrong. Take left as an example:
The left value = "locate parent element" refers to the example where the inner side of the border is outside the margin element. The simple memory is "inside the border, outside the margin ".

Right | bottom | This is also true for left.

4. Z-Index
I will not talk about the details of Z-index here, because I feel I cannot express myself clearly, in addition, the relevant chapter in the CSS authoritative guide gives a clear description of Z-index (especially the knowledge of overlapping contexts), which is very useful.
If you can understand the following cascade order, it proves that you have learned the Z-index very well. Note the cascade order of # one1 element # Two element.

Example: http://www.kangchangan.cn/cnblog/zIndexStackingContext.html

 

5. Postion and Document Stream
As long as the postion: absolute | relative | fixed element is set for the element, the element will leave the Document Stream.
But the relative element is a special case, because it is actually out of the Document Stream, but its original space still occupies the Document Stream.

For example:

 

Code

  <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  
  <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  
  <  Head  >  
  <  Meta HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"     />  
  <  Title  >  Relative  </  Title  >  
  <  Style Type  = "Text/CSS"  >  
*  {  Margin  :  0  ;  Padding  :  0  ; }  
Body  {  Padding  :  50px  ;  Background-color  :  # Ffffcc  ;  } 
Span  {  
Position  :  Relative  ;  
Left  :  50px  ;  
Top  : 40px  ;  
Background-color  :  # Ff9900  ;  
  }  
  </  Style  >  
 </  Head  >  

  <  Body  >  
  <  P  >  Rain-man rain-man  <  BR  />  
Rain-man rain-man <  Span  >  Cnblog  </  Span  >  Rain-man rain-man  <  BR  />  
Rain-man rain-man  <  BR  />  
Rain-man rain-man <  BR  />  
Rain-man rain-man  <  BR  /> </  P  >  
  </  Body  >  
  </  Html  > 

6. positon and display
There are two types of elements: inline elements and block elements (of course there are others). There is a very important common sense in inline elements, that is, the two elements in the block cannot set the style of the block element, for example, width | height.
Relative: What type is the original type and what type is still.
Absolute | fixed: the element is reset to a block element. For example, you want to specify the size for the span element and locate it absolutely.
<Span style = "position: absolute; width: 100px; Height: 50px;"> span </span> is completely correct,
<Span style = "position: absolute; display: block; width: 100px; Height: 100px;"> span </span>: The display: block here is redundant.

7. Position and float
If position: absolute | fixed is set for an element, float cannot be set for this element. This is a common-sense knowledge point, because it is two different streams, one is a floating stream, and the other is a "positioning stream (this is your own name, huh, huh )".
But relative does. Because its original space still occupies the Document Stream.

8. Bug

Bug1:

Refer to the following link for more information: Z-index: 11 | an integer greater than 10.

Bug2:

Bug page: http://www.kangchangan.cn/cnblog/floatPosition.html

Solution page: http://www.kangchangan.cn/cnblog/floatPosition2.html

The solution page is displayed.