CSS learning------CSS Positioning (position) and floating (float)

Position property: Used to position elements

the meaning of positioning :

Positioning allows you to define where the element box should appear relative to its normal position,

Relative to the parent element,

Relative to another element,

Relative to the location of the browser window itself.

Positioning is divided into: absolute positioning and relative positioning.

Relative positioning:

If a element is positioned relative to it, it will appear where it is located. You can then move the element "relative to" its starting point by setting a vertical or horizontal position.

When using relative positioning, the element still occupies the original space, regardless of whether it is moved or not. Therefore, moving an element causes it to overwrite other boxes.

Example:

Result: 650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/34/50/wKioL1Oq4dGgDNSKAAAEF_fukAs604.png "title=" capture. PNG "alt=" Wkiol1oq4dggdnskaaaef_fukas604.png "/> is known by the results, the position of other pictures will not change after moving. The positioned element is positioned relative to its initial position. 

Absolute positioning:
An element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.
The position of an absolutely positioned element is relative to the nearest positioned ancestor element , and if the element does not have a positioned ancestor element, then its position is relative to the original containing block .
Example:
is known by the result, the position of the other elements moves, and the positioned element is positioned relative to the parent element. 

Summarize:
Relative positioning is the initial position of the "relative to" element in the document, while absolute positioning is "relative to" the nearest positioned ancestor element, or "relative to" the original containing block if no positioned ancestor element exists.

CSS floating:
The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.
Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist.
Floating rules See: http://www.w3school.com.cn/css/css_positioning_floating.asp
Example: Wrap text around a picture (the principle is that the row box next to a floating box (here is a text box) is shortened)
To prevent a row box from wrapping around a floating box, you need to apply the clear property to the box .
The Clear property specifies which side of the element does not allow other floating elements.
Clear value: Left,right,both,none,inherit
Example:
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/34/55/wKioL1Oq6wSRJLLdAAAO2Uucmrc319.png "title=" capture. PNG "alt=" Wkiol1oq6wsrjlldaaao2uucmrc319.png "/>
Clear can also have a lot of ways to use!!! See: "Line box and cleanup" in the reference link

Several other properties of position:
static: The element box is normally generated. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.
fixed: the element box behaves like the position is set to absolute, but its containing block is the window itself .

Other Positional properties

 

  

   
 
    
Overflow
 
    
Sets what happens when the content of an element overflows its area.
 
   
   
 
    
Clip
 
    
Sets the shape of the element. The element is cut into the shape and then displayed.
 
   
   
 
    
Vertical-align
 
    
Sets the vertical alignment of the element.
 
   
   
 
    
Z-index
 
    
Sets the stacking order of elements. (z-index:0 is the default, 1 is the lower level)

 
   
  
 

Value of overflow: visible (default), Scroll,hidden,auto,inherit;

Clip: Used to define a clipping rectangle.
For an absolutely positioned element , the content within the rectangle is visible.
The contents of this clipping area are processed according to the value of overflow.
The clipping area may be larger than the content area of the element, or it may be smaller than the content area.
Value: Rect (top,  right,  bottom,  left), auto;

tip:position is set to absolute, and the clip property allows you to cut the image.
img {position:absolute;clip:rect (0px 50px 200px 0px)}
Position is set to absolute, combining the Z-index property allows the image to be positioned underneath the text
IMG.X{POSITION:ABSOLUTE;LEFT:0PX;TOP:0PX;Z-INDEX:-1}