• 关于通过jquery来理解position的relative及absolute


     一个多月前刚刚开始系统接触Javascript/css/html的时候一直对position属性的relative及absolute不是很了解。今天在接触jquery中无意间发现通过slideToggle()

    的滑动效果可以更加方便清楚的了解position属性的含义。下面是代码。

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $("#flip").click(function(){
    $("#panel").slideToggle("slow");
    });
    });
    </script>

    <style type="text/css">
    #panel,#flip
    {
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
    position:relative;
    left:200px;
    top:100px;
    }
    #panel
    {
    padding:50px;
    display:none;
    }
    </style>
    </head>
    <body>

    <div id="flip">Click to slide the panel down or up</div>
    <div id="panel">Hello world!</div>

    </body>
    </html>

    可以注意到这里我写的代码是用了relative,这样才可以实现slideToggle应该有的滑出滑进效果,但如果把position改为absolute,就不能实现可见的滑动滑出效果。

    我是这样理解的,当position为绝对时,两个div的位置被固定在一起,于是根本看不出滑动的效果,而属性定为相对,则可以实现滑动滑出的效果。

    不知道我说的对不对,有没有大神可以来帮我肯定一下?

  • 相关阅读:
    jm8.6编解码器概述
    mingw32环境下链接库找不到问题
    ts流中的pcr与pts计算与逆运算
    基于医疗知识图谱的问答系统(二)
    Neo4j图数据库导入数据
    基于医疗知识图谱的问答系统(一)
    知识图谱和neo4j的基本操作
    从.NET转GO了
    Flask开发技巧之参数校验
    如何在PPT中插入Pyecharts的图表?
  • 原文地址:https://www.cnblogs.com/shijia-dreamhome/p/4299033.html
Copyright © 2020-2023  润新知