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. null值是不会算在count以内的

    做统计的时候,null是不计算在count以内的.所以字段的值最好不要设置为null. 比如:select count(user_id) as beyond_num from fs_users_add ...

  2. Delphi- 数据加密和解密

    Delphi进行数据加密,在数据库方面经常要使用到.从网上转载过来的,以后会经常会用到. 一.MD5加密算法 在C#/.Net里提供了MD5加密的类库.在Delphi中没有.只能自己建一个新的单位,将 ...

  3. HDU5100Chessboard（数论）

    HDU5100Chessboard(数论) 题目链接 题目大意:用k∗1的瓷砖区铺n∗n的矩形,问能铺上的最大的面积. 解题思路:这题没有直接得出结论:l = n%k, ans = max[(n^2 ...

  4. 【剑指offer】包括min函数的栈

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/26064213 剑指offer上的第21题,之前在Cracking the Coding i ...

  5. optimize table-2

    今天在看CU的时候,发现有人问有关optimize来表优化的问题,当年因为这个问题,困扰我很长一段时间,今天有空我把这个问题,用实际数据来展示出来,让大家可以亲眼来看看,optimize table的 ...

  6. linux上安装shell编辑器与linux运维面试题

    分两个部分 一.安装B-shell解释器 安装cygwin  Eclipse要找到安装的bin路径 https://cygwin.com 二.安装编辑器shellEd 下载可以得到一个:net.sou ...

  7. 全球5大安全工具Linux发行版本

    全球5大安全工具Linux发行版本http://automationqa.com/forum.php?mod=viewthread&tid=2314&fromuid=21

  8. 解决 kindle 书籍字体颜色偏淡问题的方法

    现象 通过Markdown转换而来的mobi格式书籍都有一个大问题:字体偏淡,放在kindle上看对比度很差. 原因分析: 导致这种问题的原因,可能是因为在制作电子书的过程中,这些内容是被标注了彩色或 ...

  9. c# switch case语句

    switch是一个控制语句,用于选择一个要执行的语句块. 一个switch语句包括一个或多个执行的语句块.每个语句块包括一个或多个case标签,case后接要执行的语句. 如下面的代码 Codeint ...

  10. ionic 手机端如何嵌入视频iframe

    需求说明:后台提供功能,可以通过富文本编辑器[summernote]上传优酷的视频链接地址(这里需要注意:优酷视频提供多种操作方式 下面截图说明,先做个标记): 客户端是通过ionic开发的:而上传的 ...