位置: 编程技术 - 正文

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中文字垂直排列)

  • 所得税税负率是125正常吗
  • 怎样注册投资有限公司
  • 小规模纳税人出售使用过固定资产
  • 其他综合收益影响递延所得税负债吗
  • 小微企业条件2018
  • 发票抬头写错了还能改吗
  • 财务报表中利润率怎么算
  • 小规模没有成本票企业所得税怎么办呀
  • 发票加盖公章有用吗
  • 长期待摊费用属于无形资产吗
  • 长期股权投资收益会计处理
  • 长期股权投资权益法初始成本的确定
  • 定额发票不够用可以申请额度要交税吗
  • 购销合同没有约定期限
  • 发票没认证可以作废吗?
  • 法人存入现金的会计分录
  • 增值税实际缴纳总额
  • 工程安装公司是干嘛的
  • 小规模纳税人开专票税率是1%还是3%
  • 一般纳税人的工资可以抵扣吗
  • 股票期权个人所得税税率表
  • 诊所购药有差价怎么办
  • 汇总转账凭证可以是一借多贷
  • 个人给公司付款怎么做分录
  • 发票开出多久可以作废
  • 坏账准备什么时候转回
  • 装win7ahci
  • 异地提供建筑服务预缴增值税
  • 乱账怎么调整
  • 其他应付款不需要支付的怎么处理,预算会计
  • 无偿占用资金企业有哪些
  • 基于Perclos&改进YOLOv7的疲劳驾驶DMS检测系统(源码&教程)
  • javascript怎么用
  • 可予税前扣除的合理部分
  • chcp命令
  • 存货报废如何处理方案
  • 客户不要的专票我们可以不作废吗
  • 冲以前年度成本分录
  • 小规模纳税人直接从农户购入农产品要交增值税吗
  • 补充医疗保险属于什么
  • 织梦系统网站搭建教程
  • 安装和使用蓄能器应注意哪些问题
  • 小规模纳税人进项发票怎么做账
  • 一般纳税人不抵扣怎样交税
  • 其他权益工具投资公允价值变动怎么计算
  • 公司报销招待费需要发票还需要菜单明细吗
  • 购入固定资产入账成本
  • 年底进项税额比年初多
  • 核定扣除投入产品怎么算
  • 以货换货怎么交印花税
  • 固定资产清理借方表示什么意思
  • 母子公司合并报表案例
  • 小规模纳税人自行开具增值税专用发票税率
  • 分公司出现法律问题谁负责
  • 应收账款期初余额在借方还是贷方
  • 申报个人所得税的软件叫什么
  • 财务预付账款情况说明
  • 拆迁置换安置房
  • 基本户怎么提现金
  • 事业单位可以报考事业单位吗
  • 红字冲销发票的作用
  • 怎么调整原材料的数量和单价
  • 新准则房地产企业收入确认时间
  • 简单介绍春节的风俗
  • 在一台服务器上安装软件
  • 单网卡计算机有几个网络接口
  • Ubuntu中Source Insight的使用详解
  • windows怎么定位
  • Linux中如何查看文件大小
  • centos禁用root
  • win8 应用商店
  • oracle创建emp表
  • 关于超链接下列说法中错误的是
  • opengl编程实例
  • jquery设置滚动条到底部
  • 以下关于js说法错误的是
  • jqueryui
  • javascript的
  • android draglistview中拖动异常显示,无法移动到原先位置
  • javascript原理详解
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设