zno2

display 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        .parent{
            width:200px;
            height: 200px;
            background-color: aqua;
            position: absolute;
            left: 0px;
            top:0px;
        }
        span{
            display: block;
            width: 40px;
            height:40px;
            border: solid brown 1px;
            margin:1px;
        }

        .absolute{
            position: absolute;
            right: 0px;
            top:0px;
        }
        .relative{
            position: relative;
            left:160px;
            bottom:40px;
        }

        .fixed{
            position: fixed;
            left:160px;
            top:0px;
        }

        .button{
            position: absolute;
            left: 0px;
            top:220px;
        }
        .button button{
            margin:1px;
            color:white;
            background-color: brown;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
        function addClass(clazz ,obj){
            $('#targ').attr("class",clazz);
            $(obj).css("background-color","blue");
            $(obj).siblings().css("background-color","brown");
        }

    </script>
</head>
<body>
    <div class="parent">
        <span>1</span><span id="targ">2</span><span>3</span><span>4</span>
    </div>
    <div class="button">
        <button onclick="addClass('absolute',this)">为2添加样式 absolute</button><br>
        <button onclick="addClass('relative',this)">为2添加样式 relative</button><br>
        <button onclick="addClass('fixed',this)">为2添加样式 fixed</button><br>
        <button onclick="addClass('',this)">为2移除样式</button>
    </div>

</body>
</html>

 

结果：

结论：

absolute 和 fixed 异次元，relative 次元

fixed 是相对视窗定位

absolute 是相对父元素定位

relative 是相对自己定位

 

参考：http://www.w3schools.com/css/css_positioning.asp

posted on 2016-08-05 17:56  zno2  阅读(167)  评论(0)  编辑  收藏  举报

导航