SideBar---fixed定位

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    　　　<style>
        /*外层fixed*/
        body {
            width: 2000px;
            height: 2000px;
            background: #000;
        }

        .wrap {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            height: 100%;
        }

        /*内层绝对定位，相对浏览器*/

        .toolbar {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 100%;
            background: #fff;
            -webkit-transition: right .3s ease-in-out 0s;
            -moz-transition: right .3s ease-in-out 0s;
            transition: right .3s ease-in-out 0s;
        }

        /*相对toolbar定位*/

        .toolbar-s {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            line-height: 100px;
            bottom: 5%;
            text-align: center;
        }

        .toolbar-tabs {
            position: relative;
            left: 0;
            top: 76%;
            width: 40px;
            height: 240px;
            margin-top: -240px;
            cursor: pointer;
            color: #fff;
        }

        .toolbar-server {
            top: 0;
            background: #9B59B6;
        }

        .toolbar-wechat {
            top: 120px;
            background: #E74C3C;
        }

        .toolbar-qq {
            top: 240px;
            background: #34495E;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="toolbar">
            <div class="toolbar-tabs">
                <div class="toolbar-s toolbar-server">fix1</div>
                <div class="toolbar-s toolbar-wechat">fix2</div>
                <div class="toolbar-s toolbar-qq">fix3 </div>
            </div>
        </div>
    </div>
</body>

</html>