SideBar---fixed定位

最新推荐文章于 2021-12-19 21:08:44 发布

weixin_30544657

最新推荐文章于 2021-12-19 21:08:44 发布

阅读量199

点赞数

原文链接：http://www.cnblogs.com/kymming/p/6408910.html

版权

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

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>	
</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>

转载于:https://www.cnblogs.com/kymming/p/6408910.html

weixin_30544657

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫