<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>CSS Positioning</title>    <style>
    p.pos_fixed {
        position: fixed;
    
    
   
    <p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
    <p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
    <h2>This is a heading with no position</h2>
    <h2 class="pos_top">This heading is moved upwards according to its normal position</h2>
    <p><b>Note:</b> Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.</p>
    <h2 class="absolute">This is a heading with an absolute position</h2>
    <p>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.</p>
    <h1>This is a heading</h1>
    <img src="w3css.gif" width="100" height="140" />
    <p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>