【代码笔记】Web-CSS-CSS Positioning

一，效果图。

 

 

 

二，代码。

 

    
    
    



    
Some more text
    
Note: IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
Some text
    
This is a heading with no position
    
This heading is moved left according to its normal position
    
This heading is moved right according to its normal position
    
Relative positioning moves an element RELATIVE to its original position.
    
The style "left:-20px" subtracts 20 pixels from the element's original left position.
    
The style "left:20px" adds 20 pixels to the element's original left position.
    
This is a heading with no position
    
This heading is moved upwards according to its normal position
    
Note: Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.
    
This is a heading with an absolute position
    
With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.
    
This is a heading
    
    
因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。

 

参考资料：《菜鸟教程》