• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Div  CSS absolute与relative的区别小结
    详细讲解两者的关系,需要配合例子,请先看例子:

    以下是引用片段:
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    html xmlns="http://www.w3.org/1999/xhtml"> 
    head> 
    meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    title>Div + CSS Example, Wayhome's Blog/title> 
    style type="text/css"> 
    !-- 
    body,td,th{font-family:Verdana;font-size:9px;} 
    --> 
    /style>/head> 
    body> 
    div style="position:absolute; top:5px; right:20px; width:200px; height:180px; background:#00FF00;"> 
     position: absolute;br /> 
     top: 5px;br /> 
     right: 20px;br /> 
     div style="position:absolute; left:20px; bottom:10px; width:100px; height:100px; background:#00FFFF;"> 
    position: absolute;br /> 
    left: 20px;br /> 
    bottom: 10px;br /> 
    /div> 
    /div> 
    div style="position:absolute; top:5px; left:5px; width:100px; height:100px; background:#00FF00;"> 
     position: absolute;br /> 
     top: 5px;br /> 
     left: 5px;br /> 
    /div> 
    div style="position:relative; left:150px; width:300px; height:50px; background:#FF9933;"> 
     position: relative;br /> 
     left: 150px;br /> 
     br /> 
     width: 300px; height: 50px; br /> 
    /div> 
    div style="text-align:center; background:#ccc;"> 
      div style="margin:0 auto; width:600px; background:#FF66CC; text-align:left;"> 
      p>1/p> 
      p>2/p> 
      p>3/p> 
      p>4/p> 
      p>5/p> 
      div style="padding:20px 0 0 20px; background:#FFFF00;"> 
        padding: 20px 0 0 20px; 
      div style="position:absolute; width:100px; height:100px; background:#FF0000;">position: span style="color:#fff; ">absolute/span>;/div> 
      div style="position:relative; left:200px; width:500px; height:300px; background:#FF9933;"> 
        position: span style="color:blue;">relative/span>;br /> 
       left: 200px;br /> 
       br /> 
       width: 300px;br /> 
       height: 300px;br /> 
       div style="position:absolute; top:20px; right:20px; width:100px; height:100px; background:#00FFFF;"> 
        position: absolute;br /> 
        top: 20px;br /> 
        right: 20px;br />/div> 
       div style="position:absolute; bottom:20px; left:20px; width:100px; height:100px; background:#00FFFF;"> 
        position: absolute;br /> 
      bottom: 20px;br /> 
      left: 20px;br /> 
      /div> 
      /div> 
      /div> 
      
    /div> 
    /div> 
    /body> 
    /html> 


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

    您可能感兴趣的文章:
    • javascript css styleFloat和cssFloat
    • javascript css float属性的特殊写法
    • css 跨浏览器实现float:center
    • CSS中Float(浮动)相关技巧文章
    • javascript下操作css的float属性的特殊写法
    • css position: absolute、relative详解
    • CSS定位中Positoin、absolute、Relative的一些研究
    • relative absolute无法冲破的等级问题解决
    • position:relative/absolute无法冲破的等级
    • 解决rs.absolutepage=-1的问题
    • 详细分析css float 属性以及position:absolute 的区别
    上一篇:页面布局黄金比例[图片]
    下一篇:css实现文字垂直居中的代码第1/2页
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Div  CSS absolute与relative的区别小结 Div,amp,nbsp,CSS,absolute,与,