測试代码例如以下:
        <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. python-生成器即send()用法

    参考链接: http://www.mamicode.com/info-detail-2399245.html 作者首先介绍了生成器的作用:是为了让程序员可以更简单的编写用来产生值的序列的代码,然后又介 ...

  2. 【转】 我的java web登录RSA加密

    [转] 我的java web登录RSA加密 之前一直没关注过web应用登录密码加密的问题,这两天用appscan扫描应用,最严重的问题就是这个了,提示我明文发送密码.这个的确很不安全,以前也大概想过, ...

  3. 做一个萌萌哒的button之box-shadow

    接上篇:http://blog.csdn.net/u010037043/article/details/47035077 一.box-shadow box-shadow是给元素块加入周边阴影效果. b ...

  4. iOS 开发百问(5)

    42. 警告:Multiplebuild commands for output file target引用了名字反复的资源 找到当前的target,展开之后.找到CopyBundle Resourc ...

  5. 21. 【intellij idea】Project Structure 讲解

    转自:.https://www.cnblogs.com/zadomn0920/p/6196962.html 项目的左侧面板 项目设置->Project Project Settings -> ...

  6. 干货分享 -- Math

    昼猫笔记 JavaScript -- Math Math也是JS的内置对象,但是它不是一个构造函数,它属于一个工具类不用创建对象,它封装了数学运算相关的属性和方法,今天就来写下常用的函数[API(ap ...

  7. C# 之 继承

    继承     继承是OOP最重要的特性之中的一个.不论什么类都能够从还有一个类中继承,这就是说,这个类拥有它继承的类的全部成员. 在OOP中,被继承的类称为父类. 在C#中的对象仅能直接派生于一个基类 ...

  8. Android学习笔记(23):列表项的容器—AdapterView的子类们

    AdapterView的子类的子类ListView.GridView.Spinner.Gallery.AdapterViewFlipper和StackView都是作为容器使用,Adapter负责提供各 ...

  9. js---16继承

    123 instanceof Number;//false,要左边是对象右边是函数 typeof 123 ; //number new Number(123) instanceof Number; / ...

  10. Zabbix + Grafana

    Grafana 简介 Grafana自身并不存储数据,数据从其它地方获取.需要配置数据源 Grafana支持从Zabbix中获取数据 Grafana优化了图形的展现,可以用来做监控大屏 Grafana ...