測试代码例如以下:
        <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. ArcGIS api for javascript——显示地图属性

    描述 本例展示了如哦读取地图和图层的属性和返回信息给用户.本例中的四个按钮允许用户接收地图属性.每个按钮调用不同的函数. ·Get All Map Layers - 这个按钮调用getMapLayer ...

  2. 基于Linux的智能家居的设计(2)

    1  系统整体设计方案 智能家居系统的是一个实时查询家庭的温湿度.照明控制.自己主动控制的设定.集家庭娱乐.智能安防为一体,大量数据快处理.可靠的系统,因此在硬件和软件上都有非常大的要求,因此在这里进 ...

  3. C++语言笔记系列之十——静态成员

    1.静态成员 (1)由keywordstatic修饰 静态变量定义语句在编译阶段就运行,运行过程中不再运行. (2)分类:静态数据成员.静态成员函数. (3)静态成员时类的全部对象共享的成员,而不是某 ...

  4. java 爬虫在 netbeans 里执行和单独执行结果不一样

    在做内容測试的时候.发现我的爬虫(前些文章略有提及)在 netbeans 里面可以成功爬取网页内容,而单独执行时,给定一个 url,爬到的网页却与在浏览器里面打开 url 的网页全然不一样,这是一个非 ...

  5. lightoj--1008--Fibsieve`s Fantabulous Birthday(水题)

    Fibsieve`s Fantabulous Birthday Time Limit: 500MS   Memory Limit: 32768KB   64bit IO Format: %lld &a ...

  6. matlab 常用机器学习算法的实现

    1. KNN 分类 load fisheriris X = meas; Y = species; % 3 分类问题 % 通过训练集进行训练 Mdl = fitcknn(X, Y, 'NumNeighb ...

  7. excel操作小技巧

    excel拼接sql语句时,时间格式问题 问题:若直接插入时间的单元格 :="insert into t_entity_car (create_time,name,age) value (' ...

  8. Hexo Daemon

    前提 今天中午的时候发现自已网站突然不能访问了,我猜肯定是后台的hexo服务异常自动kill掉了.果然登录服务器ps -ef | grep hexo查看进程,果然发现hexo的进程不在了.由于我将输出 ...

  9. 学习《SQL必知必会(第4版)》中文PDF+英文PDF+代码++福达BenForta(作者)

    不管是数据分析还是Web程序开发,都会接触到数据库,SQL语法简洁,使用方式灵活,功能强大,已经成为当今程序员不可或缺的技能. 推荐学习<SQL必知必会(第4版)>,内容丰富,文字简洁明快 ...

  10. 紫书 例题 9-13 UVa 1220 (最大独立子集)

    这里的状态定义的非常的巧妙,d(i, 1)表示以i为根节点且选i的子树的最大独立子集 d(i, 0)表示以i为根节点且不选i的子树的最大独立子集 d(i, 1) = sum{ d(v, 0) | v是 ...