CSS样式定位

来源：互联网发布：黄金时代超人知乎编辑：程序博客网时间：2024/06/17 21:40
<html>  <head>    <title>CSS样式定位</title>    <!--定位：定义元素的位置-->    <!--定位有三种方式：普通流（默认），绝对定位，相对定位-->            <style type="text/css">      /*绝对定位：以网页坐标系为基准进行定位*/      #box-abs{        position:absolute;        left:100px;        top:100px;        border:1px dashed red;    }    </style>    <style type="text/css">      /*相对定位：相对元素原始的位置定位*/      .pos{        position:relative;        left:200px;        top:50px;      }      .pos-left{        position:relative;        left:500px;      }      .pos-top{        position:relative;        top:-100px;      }    </style>    <style type="text/css">      /*z-index属性：值越小，越靠近底部，可以是负数，默认值为0*/      /*要想使用z-index属性必须使用postion:absolute/relative/fixed三个属性之一。*/      .box1{        position:absolute;        left:500px;        top:500px;        z-index:1;                width:300px;        height:150px;        border:1px solid black;        margin-top:20px;        background-color:red;      }      .box2{        position:absolute;        left:550px;        top:550px;        z-index:2;                width:300px;        height:150px;        border:1px solid black;        margin-top:20px;        background-color:yellow;      }      .box3{        position:absolute;        left:600px;        top:600px;        z-index:3;                width:300px;        height:150px;        border:1px solid black;        margin-top:20px;        background-color:blue;      }    </style>      </head>  <body>    <p id="box-abs">获取，理解，拓展，应用，纠错</p>    <br><br><br><br>    <h2>1标题</h2>    <h2 class="pos">2标题左下移动</h2>    <h2 class="pos-left">3标题向左移动</h2>    <h2 class="pos-top">4向上移动</h2>        <br><br><br><br>    <h1 class="box1">标题一</h1>    <h1 class="box2">标题二</h1>    <h1 class="box3">标题三</h1>  </body></html>
1 0