zoukankan      html  css  js  c++  java
  • Div CSS absolute与relative的区别小结

    absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 

      1. 没有设定 Top、Right、Bottom、Left 的情况,默认依据父级的“内容区域原始点”为原始点,上面例子红色部分(父级黄色区域有 Padding 属性,“坐标原始点”和“内容区域原始点”不一样)。 

      2. 有设定 Top、Right、Bottom、Left 的情况,这里又分了两种情况如下: 

      (1). 父级没 position 属性,浏览器左上角(即 Body)为“坐标原始点”进行定位,位置由 Top、Right、Bottom、Left 属性决定,上面例子绿色部分。 

      (2). 父级有 position 属性,父级的“坐标原始点”为原始点,上面例子浅蓝色部分。 

      relative:相对定位,CSS 写法“ position: relative; ”,参照父级的“内容区域原始点”为原始点,无父级则以 Body 的“内容区域原始点”为原始点,位置由 Top、Right、Bottom、Left 属性决定,且有“撑开或占据高度”的作用,上面例子橙色部分。 

      通过上面的例子和讲解,相信熟练运用 absolute 与 relative 并不是一件很困难的事,我们周围有不少关于 absolute 与 relative 的好例子,比如“网易163免费邮”首页(http://mail.163.com),里面就有大量的运用。 

      例子代码在 IE5.5、IE6、FF1.5、Opera9 测试通过。 

  • 相关阅读:
    PHP定时执行计划任务
    MySQL正则表达式 REGEXP详解
    mysql常用的一些命令,用于查看数据库、表、字段编码
    MySQL 编码
    【MySQL】Win7下修改MySQL5.5默认编码格式
    linux下使用svn
    MySql command line client 命令系列
    linux svn
    BZOJ5317 JSOI2018部落战争(凸包)
    Educational Codeforces Round 58 Div. 2 自闭记
  • 原文地址:https://www.cnblogs.com/jinTaylor/p/4071204.html
Copyright © 2011-2022 走看看