absolute、relative，toggle()

时间：2015-06-02 18:01:03 阅读：136 评论：0 收藏：0 [点我收藏+]

测试代码如下：

        <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()

标签：html css 前端 js jquery

原文地址：http://blog.csdn.net/richard_dzh/article/details/46331431

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行