Dreamweaver tutorial-css Positioning (positon) tutorial

div+css page layout is essential is positioning, this section of knowledge and CSS box model knowledge points to understand the results.

1. Relative positioning (relative)

Relative positioning refers to the movement relative to where it should be.

  ..... <style type= "Text/css" >
  dingwei{
   position:relative;
  left:50px;
  }
  </style> ...
  <p> I'm a normal text </p>
  <p class= "Dingwei" > I was supposed to be right under it,
  But relative's relative positioning allowed me to move 50 pixels to the right, based on the normal position. </p>
  </body>
  
 
2. Absolute positioning (absolute)
 
Absolute positioning is very well understood, you specify the coordinates that appear in the element (X,y), and then it is displayed exactly there.
 
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" 
  "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD" >
  
 
The left property used in positioning represents the distance from the left-hand side of the element, and the top property represents the position above the distance. If you use a coordinate system to understand the word left is the horizontal axis x, and top is the ordinate y.
 
Absolute positioning is actually relative positioning
 
Yes, absolute positioning will accurately locate one of your elements in accordance with our given coordinates x,y. But the question is, where is the origin of the coordinate system? The answer is the parent element.
 
In the example above, the element class for "Dingwei2" is set to absolute positioning, and its parent element is body, so it is actually positioned relative to the body position. If you have the following code:
 
<p>
   paragraph body
  <strong> accent text </strong>
 <p>
 
If you set an absolute position on the strong element, the coordinate origin will be the position of the parent element p.