侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

Div CSS absolute与relative的区别小结

前端  /  管理员 发布于 2年前   154

详细讲解两者的关系,需要配合例子,请先看例子:

以下是引用片段:
<!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 测试通过。


  • 上一条:
    div+css页面布局的五个小技巧
    下一条:
    css font缩写总结附实例
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在js中mouseover和 mouseenter的区别浅析(0个评论)
    • uniapp调用手机实现打电话录音功能示例代码(0个评论)
    • 在uniapp开发微信小程序中图片大小显示不正常解决方法(0个评论)
    • 在vue2中如何实现v-model示例(0个评论)
    • js + Bolb实现文件流下载csv文件示例代码(0个评论)
    • 近期文章
    • 在Laravel应用程序如何减少代码重复编写(0个评论)
    • 在laravel项目中提高安全性方式推荐:CSP内容安全策略(0个评论)
    • 在go语言中从值中获取常量名称代码示例(0个评论)
    • 在go语言中如何通过名称获得结构字段和值代码示例(0个评论)
    • 在go语言中用JQuery + html2canvas实现拍摄浏览器的屏幕截图示例(0个评论)
    • 人生感悟分享:讲一个大学毕业生到社畜老狗的蜕变心路历程(0个评论)
    • laravel9框架报错Target class... does not exist解决方式(0个评论)
    • Laravel 9.48版本发布(0个评论)
    • Meta高级工程师现身说法:程序员干得越久,代码写得越少?(0个评论)
    • 本站zongscan祝大家除夕快乐,2023有奔头(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客