測试代码例如以下:
        <div>
<div class="global">不应用样式</div>
<div class="global abs">位置为:absolute </div>
<div class="global rel">位置为:relative</div>
</div>
这两者的差别:
1. absolute不占位置,relative是占位置的(往往absolute配置z-index使用)
 
 (abs的div被以下的rel的div覆盖了,可使用z-index来显示abs)
2. 默认情况下(即未指明top,left,right,bottom,仅仅设置了absolute),位置是依据父容器决定的
3. 结合top,left,right,bottom使用。absolute位置是依据浏览器窗体来定的,relative是依据自身基准线来定的
(为两个div加上了top:10px的属性。可见abs【窜上去了】是依据窗体来决定的。而rel是依据自身基准线决定的)
4. 在结合top、bottom、right、left等属性时,假设想absolute(绝对定位)能以父层做为定位基线的话,则在父层应用absolute或relativ属性就能够!
(在父div加上了position:absolute,结果如图。)

从图大概能够看出个所以然来,可是详细情况还是须要调试的。

另外对一个位置做显示隐藏能够使用$(obj).toggle(),来切换隐藏和显示

absolute、relative,toggle()的更多相关文章

  1. css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

  2. focus、click、blur、display、float、border、absolute、relative、fixed

    onfocus:获取焦点,点击时,按着不放 onclick:点击松开之后,未点击其他处 onblur:点击松开之后,又点击其他处 display:block,none,inline block:单独占 ...

  3. HTML静态网页的格式与布局(position:(fixed、absolute、relative)、分层、float(left、right))

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或r ...

  4. CSS position: absolute、relative定位问题详解

    CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...

  5. HTML中的布局方式:absolute、relative、fixed、static

    在CSS中关于定位的内容是: position:relative | absolute | static | fixed     static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z- ...

  6. position: absolute、relative的问题

    设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠 ...

  7. [原创]关于absolute、relative和float的一些思考

    absolute: 元素完全脱离文档流,不占文档流的位置,不使用top.left等属性时,仍然在原文档流位置上(但是不在文档流中,也不占用位置),设置了top.left等之后,向上寻找到第一个非sta ...

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

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

  9. absolute和relative的几个Demo

    这些例子最好通过FireFox结合FireBug调试查看 1.absolute让元素inline-block化 <!DOCTYPE html> <html xmlns="h ...

随机推荐

  1. whoami---打印当前有效的用户名称

    whoami命令用于打印当前有效的用户名称,相当于执行id -un命令. 语法 whoami(选项) 选项 --help:在线帮助: --version:显示版本信息. 实例 [root@localh ...

  2. js中数组增删查改unshift、push、pop、shift、slice、indexOf、concat、join

    js中数组增删查改unshift.push.pop.shift.slice.indexOf.concat.join

  3. 【BZOJ 1047】[HAOI2007]理想的正方形

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二维的ST表. 每个大的正方形可以由4个小的正方形组成. 然后区域内的最大值最小值.也可以由4个小的张方形部分全部覆盖到. [代码] ...

  4. FastDFS学习总结(2)--Tracker与Storage配置详解

    1.Tracker基本配置 # is this config file disabled # false for enabled # true for disabled disabled=false ...

  5. 洛谷 P2083 找人

    P2083 找人 题目背景 无 题目描述 小明要到他的同学家玩,可他只知道他住在某一单元,却不知住在哪个房间.那个单元有N层(1,2……N),每层有M(1,2……M)个房间. 小明会从第一层的某个房间 ...

  6. 怎样用第三方开源免费软件portecle从https站点上导出SSL的CA证书?

    在我这篇文章中.我提到了怎样用OpenSSL从https站点上导出SSL的CA证书?  这样的方式不太直观,且须要用户自己手工拷贝.然后另存为文件,那么有没有更好更方便的工具呢? 幸运的是,有热心于开 ...

  7. cvBoostStartTraining, cvBoostNextWeakClassifier和 cvBoostEndTraining

    /****************************************************************************************\ * Boostin ...

  8. 动态网页爬取样例(WebCollector+selenium+phantomjs)

    目标:动态网页爬取 说明:这里的动态网页指几种可能:1)须要用户交互,如常见的登录操作:2)网页通过JS / AJAX动态生成.如一个html里有<div id="test" ...

  9. 智课雅思词汇---七、cur是什么意思

    智课雅思词汇---七.cur是什么意思 一.总结 一句话总结:词根:cur, curs ( cor, cour, cours, coars) = to run 1.cub是什么意思? 词根:cumb, ...

  10. 负载均衡-lvs

    常用的负载均衡技术比较DNS 轮询DNS本身的机制不再赘述,这里主要看一看基于DNS的负载均衡,其大致原理很清楚,DNS系统本身支持同一个域名映射到多个ip (A记录),例如 这样每次向DNS系统询问 ...