day50——CSS 定位

<position>标签用于对元素进行定位，也就是定义元素的位置

相对定位：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <style type="text/css">
 5     h2.left {
 6       position: relative;    # relative用于生成相对定位的元素
 7       left: -20px;           # 表示相对于正常位置左偏移20px
 8     }
 9     h2.right {
10       position: relative;    # relative用于生成相对定位的元素
11       left: 20px;            # 表示相对于正常位置右偏移20px
12     }
13   </style>
14 </head>
15 
16 <body>
17 <h2> 正常位置 </h2>
18 <h2 class="left"> 向左偏移 </h2>
19 <h2 class="right"> 向右偏移 </h2>
20 </body>
21 </html>

绝对定位

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <style type="text/css">
 5     h2 {
 6         position: absolute;    # absolute用于生成绝对定位的元素
 7         left: 100px;           # 表示距离最左边100px
 8         top: 150px;            # 表示距离最上边150px
 9     }
10   </style>
11 </head>
12 
13 <body>
14 <h2> Hello World </h2>
15 </body>
16 </html>

 

posted @ 2018-02-05 12:48  落后乞丐  阅读(114)  评论(0)  编辑  收藏  举报