Div+css relative positioning and absolute positioning usage examples

This article introduces the concept of relative positioning of CSS relative, if the relative positioning of an element, it will appear in its location.

CSS Relative relative positioning

An element box that is set to relative positioning offsets a distance. The element still retains its original shape before it is positioned, and the space it occupies is still retained.

CSS relative positioning

Relative positioning is a very easy to master concept. If you position a element relative to it, it will appear in its location. You can then move the element "relative to" its starting point by setting the vertical or horizontal position.

If you set the top to 20px, the box will be 20 pixels below the bottom of the original position. If left is set to 30 pixels, a 30-pixel space is created on the left-hand side of the element, which is to move the element to the right.

 
  
  

  
   
   
#box_relative {
  
   
   
position:relative;
  
   
   
left:30px;
  
   
   
top:20px;
  
   
   
}
  
   
   

 
  
  

As shown in the following illustration:

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

CSS relative Positioning instance

 
 

  
  

  
< HTML >    
  
  

  
<  Head >    
  
  

  
< style   type="text/css">  
  
  

  
h2.pos_left {position:relative; left:-20px}
  
  

  
h2.pos_right {position:relative; left:20px}
  
  

  
</ style >   </head>  
  
  

  
<  Body >   <H2> This is the heading in the normal position </H2  >  
  
  

  
< H2   class="pos_left"> the title moves to the left relative to its normal position </h2>  
  
  

  
< H2   class="pos_right"> This heading moves to the right relative to its normal position </  H2>  
  
  

  
< P > relative positioning moves the element in the original position of the element.  </p > 
  
  

  
< P >  The style "left:-20px" subtracts 20 pixels from the original left position of the element. 
  
  

  
</ P >    
  
  

  
< P >  The style "left:20px" adds 20 pixels to the original left position of the element. 
  
  

  
</ P >    
  
  

  
</  Body >     
  
  

  
</ HTML > 

 
 

　　2. Positioning of the image to explain

I first set up a virtual scene: There is a rectangular room, there is a bucket filled with water, water is also soaked with a watermelon, the room in mid-air there are a lot of hooks for hanging things. Now I put the page elements and the above object, then the room is a Web page, bucket is a page in the plate, bucket of water is text flow, watermelon is to be positioned object.

(1) Absolute positioning of contributions (absolute)

In contrast to the previous explanation, if the watermelon is given absolute positioning, then it is tantamount to the watermelon from the water to hang in the air hook, the bucket of water in the original occupied space watermelon will automatically fill it (absolute positioning objects will give up their original occupy position, so that it is contributing). At this point, if the bucket is not positioned before, then picked up the watermelon position will no longer be affected by the bucket position, how to move the bucket, watermelon or hanging in the original position, as to how to put the watermelon, the upper left corner of the room (body upper left corner) as prevail, with left,right,top,bottom value to locate.

But if the bucket also gives a positioning setting (usually relative positioning, here are the practical tips, when the watermelon is placed is not so free, although the watermelon is picked up will not affect the water in the bucket (text stream), but it is still to listen to the barrel, the bucket will tell the watermelon "You can activity, But it should be within my range, say I want you to be 1 meters above my left, you're going to have to go with this. "If there are a lot of watermelons in the bucket, they can all be taken out to the air, they will be arranged in different heights of space (layer), so the roof vertically down, It is possible to see different watermelons stacked together (this so-called height does not exist in the Web page, just like the different layers in the Flash animation have arranged the elements, but they do not have a deep sense of view). It is obvious that the object reference target of absolute positioning is its parent, which is called the inclusion block.

(2) Relative positioning of selfishness (relative)

One of the biggest features of relative positioning is that you run away from the location and occupy the original position, not to the surrounding objects such as text flow. Relative positioning is also relatively independent, do what it is their own decision, to locate the time, it is in its own position offset (relative to the object itself offset). Then take the front for example to solve, then the watermelon seems to have magic, if the watermelon is displaced by relative positioning in the bucket you will see a phenomenon that does not exist in real life: there is a place in the water where the water is concave, the surrounding water cannot fill it, the watermelon looks beside it, if the water in the bucket is stirred, The concave position will find the change (text flow has an effect on the relative positioning object), but the distance from the concave to the watermelon always remains the same. The visible text stream also affects each other because the object does not really break out of the text stream, as two people have the opportunity to meet in the same level of horizontal movement.

(3) summarizing the characteristics of two kinds of positioning

Absolute positioning is like arranging different objects into different floors of a tall building (usually not the first layer, we understand that text flow is on the first floor), they don't affect each other, but how they move is related to the foundation and area of your building (the parent level). Relative positioning refers to the object or the first floor with the text stream stored together, there must be an impact between them.

(4) Supplement to special cases

In the case of relative positioning and absolute positioning, there is a situation where the value of their location values is negative and the object can move in the opposite direction. Just said to arrange the object in the different layers of a building, if an object in the beginning is backed by the outermost wall, and then with a negative value to locate it, it will magically run out of the wall outside, Of course, in reality there is no such thrilling and magical things happen, I just for the above to be used for example to explain the image.