【代碼筆記】Web-CSS-CSS Positioning

番茄西紅柿發(fā)布于2019-04-23 11:51 / 2893人閱讀

摘要：因?yàn)閳D像元素設(shè)置了屬性值為所以它會(huì)顯示在文字之后。參考資料菜鳥教程

一，效果圖。

二，代碼。

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Positioningtitle>
    <style>
    p.pos_fixed {
        position: fixed;
        top: 30px;
        right: 5px;
    }
    
    h2.pos_left {
        position: relative;
        left: -20px;
    }
    
    h2.pos_right {
        position: relative;
        left: 20px;
    }
    
    h2.pos_top {
        position: relative;
        top: -50px;
    }
    
    h2.absolute {
        position: absolute;
        left: 100px;
        top: 150px;
    }
    
    img {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: -1;
    }
    style>
head>

<body>
    <p class="pos_fixed">Some more textp>
    <p><b>Note:b> IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.p>
    <p>Some textp>
    <p>Some textp>
    <p>Some textp>
    <p>Some textp>
    <p>Some textp>
    <p>Some textp>
    <p>Some textp>
    <p>Some textp>
    <p>Some textp>
    <p>Some textp>
    <p>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 elements original left position.
    The style "left:20px" adds 20 pixels to the elements 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
    
    因?yàn)閳D像元素設(shè)置了 z-index 屬性值為 -1, 所以它會(huì)顯示在文字之后。