1.relative是自身定位，距原本位置的偏移

2.无侵入布局: 挪动位置，原本位置还在占据，并不会影响其他元素的布局
   应用: 实现鼠标拖拽，比自身api好用

3.top/bottom 和 left/right对立属性同时存在时:
   relative: 斗争 - 只有一个能存在，无视bottom、right
   absolute: 拉伸 - 不设置宽度或高度，就可以自动增高或增宽

4.relative的最小影响原则:
   尽量降低relative属性对其他元素或布局的潜在影响！
 （在IE7、IE8很容易出现bug）
  尽量避免使用relative
  absolute定位可以不依赖relative

深入了解relative的更多相关文章

  1. “fixed+relative==absolute”——对BFC的再次思考

    好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...

  2. Position属性四个值：static、fixed、relative、absolute的区别和用法

    1.static(静态定位):默认值.没有定位,元素出现在正常的文档流中(如果设置 top, bottom, left, right, z-index这些属性就不起做作了). 2.relative(相 ...

  3. css的relative和position探究

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  4. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  5. (App.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/MainPage.xaml", UriKind.Relative));

    (App.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/MainPage.xaml", UriKi ...

  6. 辨析relative与absolute

    谈起它们,想必大家都不陌生.relative,相对定位嘛:absolute,绝对定位嘛.但是它们到底是个啥东东呢? 看看w3c的定义,见下表 定位 含义 relative 元素框偏移某个距离.元素仍保 ...

  7. td在relative模式下，IE9不显示border

    方法一 .thisTd {    background-clip: padding-box;     position:relative; } 方法二 .thisTd {   z-index=-1; ...

  8. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  9. 慕课网__CSS__ Relative， absolute,

    同时又left, right  或者 top, bottom时 relative, 尽量少用,会出现层级覆盖, 或者单独使用, 避免层级嵌套, 或者覆盖 absolute具有包裹性, 和破坏性 包裹性 ...

  10. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

随机推荐

  1. java使用xheditor Ajax异步上传错误

    java使用xheditor Ajax异步上传时候错误如下:the request doesn't contain a multipart/form-data or multipart/mixed s ...

  2. 1513：二进制中1的个数 @jobdu

    题目1513:二进制中1的个数 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:1341 解决:455 题目描述: 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 输入: ...

  3. RichTextBox返回值标记不同颜色

    在Button按钮下,将脚本的执行结果返回到richtextbox中: 如果返回值包含“failed",则该行标记为红色 .\Scripts\升级_ERP.ps1 | % { If ($_. ...

  4. window nginx 启动无提示错误,却没有listen 80port

    一直使用虚拟机来使用web+hostonly方式; 今天为了測试一个php平台的window系统兼容性, 在官方下载了window-nginx 1.9.1版本号; 解压到文件夹, 执行nginx.ex ...

  5. excel导入数据库iis设置

    导入成功以后,基本这个小项目的所有功能都开发完成了,请IT部门帮我设定了一个固定IP,我以本机作为服务器,在本机IIS上发布了一个测试版,结果上传Excel数据报错, 错误信息“未在本地计算机上注册“ ...

  6. Static NAT with iptables on Linux

    本文的名字取的比较有意义,因为本文并不是真的要讨论如何在Linux上使用iptables实现static nat!之所以这么命名本文,是想引起别人的注意,因为中文资料,以及国内的搜索引擎,基本上没有人 ...

  7. paip. mysql如何临时 暂时 禁用 关闭 触发器

    paip. mysql如何临时 暂时 禁用 关闭 触发器 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn ...

  8. [React Native] Basic iOS Routing -- NavigatorIOS

    Inside the app component, we use NavigatiorIOS to render the compoent: class githubnotetaker extends ...

  9. Oracle 11g client的安装和配置。

    数据库和client在不同的机器之上. 在安装之前,在安装Oracle数据库的server上导航到以下的文件夹. 将listener.ora和tnsnames.ora中的host中的localhost ...

  10. UDID

    大多数应用都会用到苹果设备的UDID号,UDID通常有以下两种用途: 1)用于一些统计与分析目的:[第三方统计工具如友盟,广告商如ADMOB等] 2)将UDID作为用户ID来唯一识别用户,省去用户名, ...