<!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>