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. 框架技术--S2SH框架整合（spring部分）No 3--声明式事务

    声明式事务:就是讲事务的处理,通过配置进行配置. 几种传播特性  1. PROPAGATION_REQUIRED: 如果存在一个事务,则支持当前事务.如果没有事务则开启(比较常用)  2. PROPA ...

  2. mysql 不支持innodb的问题解决

    在新的机器上安装了mysql后,发现里面新创建的数据表的存储引擎都是myisam,于是 执行下面语句,把mysiam改为innodb. alter table tbl_test engine=inno ...

  3. 订阅基础：RSS、ATOM、FEED、聚合、供稿、合烧与订阅

    很多网友对这类名词概念非常陌生,如果没用过FEED订阅,肯定还会对诸多网站显示的FEED聚合.订阅.ATOM等等非常郁闷,虽然这几个名字间的很多并非并列关系,天缘只是有意把它们放到一起,方便对比参考, ...

  4. iOS 火星坐标相关整理及解决方案汇总(转)

    这几天在处理定位相关的代码,彻彻底底的被火星坐标恶心到了. 恶心列表 从 CLLocationManager 取出来的经纬度放到 mapView 上显示,是错的! 从 CLLocationManage ...

  5. iOS开发中WebP格式的64位支持处理

    几个月前我们项目中添加了对webp格式的处理.期间遇到了一些问题,这是当中的一个小的记录. 官方下载地址:https://code.google.com/p/webp/downloads/list 对 ...

  6. dubbo使用方法

    dubbo使用方法. Dubbo采用全Spring配置方式,透明化接入应用,对应用没有任何API侵入,只需用Spring加载Dubbo的配置即可,Dubbo基于Spring的Schema扩展进行加载. ...

  7. (step6.3.4)hdu 1151(Air Raid——最小路径覆盖)

    题意:     一个镇里所有的路都是单向路且不会组成回路. 派一些伞兵去那个镇里,要到达所有的路口,有一些或者没有伞兵可以不去那些路口,只要其他人能完成这个任务.每个在一个路口着陆了的伞兵可以沿着街去 ...

  8. 【转】Cocos2d-x 2.x CCSprite 灰白图的生成（利用shader设置）——2013-08-27 21

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=325 游戏中人物死掉后要把人物头 ...

  9. Io_Language

    Object ancestor := method ( prototype := self proto if (prototype != Obejct, writeln ("Slots of ...

  10. selenium中定位iframe框

    这是使用谷歌看到的源码.想要往里面输入内容,需要使用js. 这个iframe没有id,不能通过id直接定位到.但可以通用TagName来定位到iframe. WebDriver中定位的代码如下: St ...