zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    jqurey技术总结
    ie浏览器兼容问题小结
    FIS的合并压缩技术
    对js中数组的一些总结
    浅谈如何面向对象进行封装
    13th week blog
    12th week blog
    11th week blog
    10th week blog
    9th Week blog
  • 原文地址:https://www.cnblogs.com/yangjinbiao/p/8417122.html
Copyright © 2011-2022 走看看