測试代码例如以下:
        <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. java 线程传参 方式

    第一类:主动向线程传参   public class ThreadTest extends Thread { public ThreadTest() { } /** * 第一种通过构造方法来传递参数 ...

  2. 洛谷—— P1969 积木大赛

    https://www.luogu.org/problem/show?pid=1969 题目描述 春春幼儿园举办了一年一度的“积木大赛”.今年比赛的内容是搭建一座宽度为n的大厦,大厦可以看成由n块宽度 ...

  3. django-xadmin定制之分页显示数量

    环境:xadmin-for-python3 python3.5.2 django1.9.12 主要思路:利用django-xadmin的插件原理和原有分页插件的逻辑,单独定义一个分页显示数插件,效果如 ...

  4. HackingTeam重磅炸弹: 估值超1000万美金带有军火交易性质的木马病毒以及远控源代码泄露

    [简单介绍] 经常使用网名: 猪头三 出生日期: 1981.XX.XX 个人站点: http://www.x86asm.com QQ交流: 643439947 编程生涯: 2001年~至今[共14年] ...

  5. Java接口源码--System和应用程序进程间通信

    本文參考<Android系统源代码情景分析>.作者罗升阳 一.架构代码: ~/Android/frameworks/base/core/java/android/os ----IInter ...

  6. !HDU 2602 Bone Collector--DP--(裸01背包)

    题意:这题就是一个纯粹的裸01背包 分析:WA了好几次.01背包实现的一些细节没搞懂 1.为什么dp[i][j]赋初值为0而不是value[i].由于第i个石头可能不放! 2.在进行状态转移之前要dp ...

  7. 九度OJ 1070 今年的第几天?(模拟)

    题目1070:今年的第几天? 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3491 解决:1936 题目描写叙述: 输入年.月.日,计算该天是本年的第几天. 输入: 包含三个整数年(1& ...

  8. Android程序猿自己动手制作.9.png图片

    1:怎样制作9.png图片素材: 打开SDK工具文件夹下: draw9patch.zip  解压执行draw9patch.bat.有的直接搜索会有:draw9patch.bat. 双击执行后,例如以下 ...

  9. DDR工作原理

    DDR SDRAM全称为Double Data Rate SDRAM,中文名为“双倍数据流SDRAM”.DDR SDRAM在原有的SDRAM的基础上改进而来.也正因为如此,DDR能够凭借着转产成本优势 ...

  10. SQL Source Control

    https://documentation.red-gate.com/display/SOC5/SQL+Source+Control+5+documentation Working with migr ...