DIV+CSS Positioning position Detailed

DIV+CSS Positioning position Detailed

The main two properties of the position in the

1. 1.div+css: Property Absolute (absolute positioning) relative (relative positioning), so that they create a diversity of div+css layouts, making our web pages colorful.

   First explains relative (relative positioning), as the name implies, is relative to the position, then what is he relative to? What is the reference?

   Look at the following code:

    
2. 2

   2. Preview effect, now three side-by-side Div

    
3. 3

   3. Add positioning properties to the middle Div: position:relative ; top:10px; left:10px;

    
4. 4

   4. Preview effect:

    
5. 5

   5. It's obvious that the reference it's moving now is where it was originally occupied

        Watch the code top:10px;left10px;

        moves 10px relative to the top, moving 10px to the right relative to the left;

        Note: The Position property top right-left bottom can only refer to adjacent two edges, not just up or down, or just around.

   Now position:relative; modify to absolute;

   &NBSP
6. 6

   6. Notice that the preview effect is not obvious, then modify the top:30px;left30px;

   The preview is now as follows:

    
7. 7

   7. Found that the middle Div is out of the flow of the document, the right and left div is next to each other, and now the middle Div is positioned from the top left corner of the browser, moving 30 pixels downward and moving 30 pixels to the right.

        now involves a hierarchy of relationships, set the Z-index property of the Div, the higher the value, the layer appears at the top, you can try it yourself.

    

   reprint http://blog.sina.com.cn/u/2144983995

Div+css Positioning position detailed