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 测试通过。 

  • 相关阅读:
    123457123456---com.threeObj3.BabyShizi02--- 宝宝识字02
    协议
    123457---com.threeObj.Baobaoshizi01--- 宝宝识字01
    123456---com.twoapp.ErTongNongChangPinTu---儿童农场拼图
    Mysql
    MySQL的四种事务隔离级别
    Git撤销&回滚操作
    java.util.Timer简介
    git常用命令
    BigDecimal转String
  • 原文地址:https://www.cnblogs.com/jinTaylor/p/4071204.html
Copyright © 2011-2022 走看看