位置: 编程技术 - 正文

Div CSS absolute与relative的区别小结

编辑:rootadmin
详细讲解两者的关系,需要配合例子,请先看例子: 以下是引用片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=gb" /> <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:px; width:px; height:px; background:#FF;">  position: absolute;<br />  top: 5px;<br />  right: px;<br />  <div style="position:absolute; left:px; bottom:px; width:px; height:px; background:#FFFF;"> position: absolute;<br /> left: px;<br /> bottom: px;<br /> </div> </div> <div style="position:absolute; top:5px; left:5px; width:px; height:px; background:#FF;">  position: absolute;<br />  top: 5px;<br />  left: 5px;<br /> </div> <div style="position:relative; left:px; width:px; height:px; background:#FF;">  position: relative;<br />  left: px;<br />  <br />  width: px; height: px; <br /> </div> <div style="text-align:center; background:#ccc;">   <div style="margin:0 auto; width:px; background:#FFCC; text-align:left;">   <p>1</p>   <p>2</p>   <p>3</p>   <p>4</p>   <p>5</p>   <div style="padding:px 0 0 px; background:#FFFF;">     padding: px 0 0 px;   <div style="position:absolute; width:px; height:px; background:#FF;">position: <span style="color:#fff; ">absolute</span>;</div>   <div style="position:relative; left:px; width:px; height:px; background:#FF;">     position: <span style="color:blue;">relative</span>;<br />    left: px;<br />    <br />    width: px;<br />    height: px;<br />    <div style="position:absolute; top:px; right:px; width:px; height:px; background:#FFFF;">     position: absolute;<br />     top: px;<br />     right: px;<br /></div>    <div style="position:absolute; bottom:px; left:px; width:px; height:px; background:#FFFF;">     position: absolute;<br />   bottom: px;<br />   left: px;<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 的好例子,比如“网易免费邮”首页(   例子代码在 IE5.5、IE6、FF1.5、Opera9 测试通过。

推荐整理分享Div CSS absolute与relative的区别小结,希望有所帮助,仅作参考,欢迎阅读内容。

Div  CSS absolute与relative的区别小结

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

css实现文字垂直居中的代码第1/2页 CSS中怎样设置才能使对象中的文字垂直居中于对象,这个问题也是捆扰很多朋友的难题。现在网上的很多代码都做不到浏览器兼容。我把网上有关的方

div+css页面布局的五个小技巧 1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focu

Class与ID区别 margin和padding区别 CSS学习笔记 由于现在百分之.%的CMS都是用div+css来构建网页模板的,被逼无奈,一大把年纪了还要学习CSS,说实话没觉得用div来布局比table好在什么地方!但迫于

标签: Div CSS absolute与relative的区别小结

本文链接地址:https://www.jiuchutong.com/biancheng/375196.html 转载请保留说明!

上一篇:不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码(不用js多浏览器能用吗)

下一篇:css实现文字垂直居中的代码第1/2页(css中文字垂直排列)

  • 外轮供应公司远洋运输供应公司的退税申报?
  • 附加税的计算公式2023
  • 纳税调整增加额和递延所得税资产
  • 无发票入账违反哪条法律
  • 办理个体户营业执照需要什么条件
  • 国有企业改制资产评估增值税收规
  • 员工个人部分所承担的社保会计分录怎么做
  • 退休人员工资可以提福利费吗
  • 在筹建期间的费用属于什么
  • 没有进项发票怎么出口报关
  • 微信红包税前扣除
  • 稳岗补贴需要缴税吗
  • 同一控制下企业合并商誉
  • 建筑施工单位可以安装电表吗
  • 投资利润率的计算结果不受建设期的长短
  • 同期对比和同比增长
  • 开启共享文件夹
  • 理财收益的增值怎么算
  • 签证费会计分录
  • 购入的财务软件怎么入账
  • 工会经费,职工福利费,教育经费的扣除标准
  • mac怎么恢复出厂值
  • 附加税异地预缴如何申报
  • 员工的医药费
  • php实现日历
  • 初雪与最后的秋天的区别
  • 增值税留抵税额计入什么科目
  • thinkphp框架介绍
  • 奥杜邦的祈祷经典语录
  • python怎么学
  • vue3.0项目实战视频
  • vue中事件
  • vue路由实例
  • js中数组操作
  • htmlcss导航栏网页
  • ips attack
  • php登录流程
  • php与其他语言的比较
  • 财务章有几种样式
  • 详解九章算法
  • 航天金税盘发票冲红怎么操作
  • 印花税按什么的比例缴纳
  • 权益工具是金融资产还是非金融资产
  • 如何确定固定资产是否已经发生减值
  • 外地职工的界定
  • 工程服务费税率是多少2023
  • 收到三代手续费如何入账
  • 管理费用怎样分摊归集到产品
  • 购进的材料没有发票可以入库吗?
  • 用美元账户余额怎么用
  • 应付职工薪酬要设二级科目吗
  • 银行公司账户限额
  • 个体工商户怎样为员工缴纳社保
  • 发票认证是为了什么
  • 企业筹建期间利润计算
  • 未达起征点可以申请一次性创业补贴吗
  • 广告宣传费纳税调整额怎么算
  • 年终建账于年初建账,在录入期初余额时有什么不一样?
  • mysql设计树形数据库
  • sql有没有返回上一步
  • win8.1应用
  • be备份linux系统
  • win1020h2正式版下载
  • 怎样设置ie8
  • 微软发布Win10优化工具
  • 在Linux系统中安装pacman
  • pg环境变量
  • 一个字符串中某个字符串出现的次数
  • shell脚本case语句判断成绩
  • net命令大全
  • nodejs thrift
  • [置顶]游戏名 TentacleLocker
  • android程序崩溃会被重启
  • 莱钢生产什么产品
  • 鉴证服务是指什么
  • 百旺数据恢复
  • 领导班子和领导干部评议意见表
  • 小规模纳税人租赁收入增值税税率是多少
  • 租赁发票交多少税费
  • 职称申报后附件打不开
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设