位置: 编程技术 - 正文

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

  • 资金账簿印花税减半征收后可以叠加享受优惠吗
  • 一般纳税人劳务公司可以开3%的发票吗
  • 小规模纳税人没有税控盘怎么报税
  • 公益性捐赠税前扣除资格有效期
  • 税务师的含金量怎么样
  • 无票收入需要缴纳所得税吗
  • 企业回购股票会使所有者权益
  • 弥补以前年度亏损后怎么交所得税
  • 自产委托加工用于简易计税
  • 净资产账面价值怎么计算
  • 开发票第一行
  • 购买业务委托书计入什么科目
  • 应税销售行为的购买方为消费者个人的可以开专票吗
  • 房地产企业利息资本化条件有哪些
  • 坏账冲回要纳税调减吗
  • 去年购进的货物今年才收到发票
  • 在建工程明细科目
  • 所得税汇算清缴时间期限
  • 第一季度盈利第二季度亏损全年盈利
  • 预收房款发票开具需要注意哪些?
  • 个税手续费返还计入哪个科目
  • 高新技术企业怎么申报企业所得税
  • 公司用上年多缴的社保
  • 股东借款利息计入利润表哪个科目
  • 在windows 10中
  • 调账的基本原则
  • 公司购车要交哪些税
  • 没有营业执照哪个银行可以办理房产抵押贷款
  • 如何查看microsoft账户的邮箱
  • PHP:oci_new_collection()的用法_Oracle函数
  • linux网卡lo
  • 外汇账户转账有手续费吗
  • php 字符串函数
  • 购买股票的会计分录
  • PHP:imageinterlace()的用法_GD库图像处理函数
  • 昆明紫霞宫的46 道拐
  • stat 命令
  • 营业外支出结转损益
  • 销售蔬菜企业怎么做
  • 需要计提坏账准备吗
  • 个人所得税汇算清缴时间
  • mongodb用法
  • BOM学习
  • 进口增值税是什么意思
  • 出租车发票可以改时间吗
  • 专用发票跨月冲红流程
  • 机关事业单位体育协会举办体育赛事活动应当
  • 安装sql server 2008硬件要求
  • 收到营业外收入政府补贴的会计分录
  • 销售货物收到托运怎么办
  • 报销费用余额退回
  • 收到发票冲红怎么做分录
  • 员工福利费是不是免税项目
  • 车辆罚款单可作为费用报销吗
  • 工厂不开票怎么办
  • 残联对残疾人的补助资金是多少
  • 如何设置银行存款日记账
  • 怎样修改注册表关闭win11系统杀毒软件
  • Mac OSX通过homebrew卸载formula的方法
  • 打开优酷视频播放
  • window7主题变成xp了
  • win10周年更新版是什么意思
  • linux常用网络工具
  • Windows 8中Hyper-V虚拟机操作应用的具体步骤
  • win10如何不升级系统
  • NGUI字体图集导致Label文字破碎的BUG以及解决方案
  • javascript基础
  • 层序遍历递归实现
  • android调用相机闪退
  • bootstrap弹出表单
  • nodejs调用打印机驱动
  • python简单gui
  • javascript基础教学
  • javascript基础入门视频教程
  • js字段截取
  • 建筑劳务个人所得税申报
  • 3.0排量 车船税
  • 福建省税务局 电子
  • 综合所得申报表在哪里
  • 江西省税务局电话号码查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设