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>
SideBar---fixed定位的更多相关文章
- web移动端input获得光标Fixed定位失效解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...
- fixed 定位 苹果手机输入框触发时内容全部隐藏
问题出现在东钿微信公众号用户注册页面 页面中只有两个输入框 页面没有超过一屏,悬浮按钮也要出现在本页面 ,开始布局页面的时候没什么问题,然后我在我自己手机上测试 ,输入手机号码,非常奇怪的问题出现了, ...
- 文件正在上传的转圈圈gif图片引出的fixed定位和absolute定位
文件正在上传的转圈圈gif图片 一.文件上传时,未上传返回成功状态之前给个gif动态图片显示在页面,改善用户体验. <!--S 遮罩层 --> <div id="mas ...
- fixed定位兼容性
不过从ios5.1以来,fixed定位就已经支持了,但很遗憾,ios现在对它还只是半支持. 但是在某些情况下,会出现一些比较奇葩的问题,比如fixed元素中存在输入框子元素,这个时候就会跪了. 可以看 ...
- 【原】IOS兼容性之APP内fixed定位头部跳动
兼容现象: 在App的webview里边,我们有时候会在页面里写自定义头部,会使用到fixed定位,我们想要的效果是,页面无论怎么滑动,这个自定义的头部始终是固定在顶部的,但是在ios 11以上的版本 ...
- CSS fixed 定位元素失效的问题
一个示例 考察下面的代码: <head> <title>css filter issue</title> <style> body { height: ...
- fixed定位文本框引发的问题
<!-- 代码段1 --> <body> <!-- 可以滚动的区域 --> <main id="J_box"> <!-- 内容 ...
- 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖
今天上午学习了内联元素于与块元素的转换 个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline; 转换成块元素displ ...
- [jQuery]相对父级元素的fixed定位
(function($) { var DNG = {}; //----------------------------------------------------/ // ...
- 关于苹果手机微信端 position: fixed定位top导航栏问题
在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!do ...
随机推荐
- Redis数据结构之字典
Redis的字典使用哈希表作为底层实现,一个哈希表里面可以有多个哈希表节点,而每个哈希表节点就保存了字典中的一个键值对. 一.字典结构定义1. 哈希表节点结构定义: 2. 哈希表结构定义: 3. 字典 ...
- raspberrypi树莓派liunx下安装golang1.9环境(debian)
直接安装go1.6以上版本会出现提示 Set $GOROOT_BOOTSTRAP to a working Go tree >= Go 1.4. Go1.9的构建过程需要用于引导的 Go1.4二 ...
- (11)UML设计视图
UML的词汇表包含三种构造块:事物.关系和图 事物:事物是对模型中最具有代表性的成分的抽象 关系:把事物结合在一起 图:图聚集了相关的事物 一.事物 UML中有4种事物 (1)结构事物 UML 模型中 ...
- stm32f103和s3c2440配置
stm32 s3c2440 外部晶振: 8MHz 12MHz
- 解决本地调用office组件成功，但是发布到IIS中出现的错误（检索COM类工厂中CLSID为{00024500-0000-0000-C000-000000000046}的组件时失败）
在C#操作word或者Excel,我们可能会用到微软内置的COM组件,会出现很多问题. 如:在本地调试导出Excel没有问题,发布到IIS就有问题了,检测到的异常: 我们会发现在iis上运行的程序,没 ...
- 【面试 spring】【第七篇】spring的问题
1.spring你熟悉么?两大特色 spring 主要有IOC和AOP两大特色. =========================================================== ...
- atitit. hb 原生sql跨数据库解决原理 获得hb 数据库类型执行期获得Dialect
atitit. hb 原生sql跨数据库解决原理 获得hb 数据库类型执行期获得Dialect #-----原理 Hibernate 执行期获得Dialect 2010-07-28 12:59 ...
- 《大话操作系统——做坚实的project实践派》(7)
写操作系统内核须要了解一个详细计算平台的CPU,包含这个CPU里的寄存器和异常中断处理机制
- 1 npoi 网上 不用模板 设置密码 workbook.WriteProtectWorkbook("password", "admin"); 、、 2 locked.IsLocked = true; sheet1.ProtectSheet("password");NPOI操作EXCEL－－设置密码才可以修改单元格内容 3 模板设置密码 确定原密码 设置新密码
1 workbook.WriteProtectWorkbook("password", "admin"); 还是可以进去 只读进去 可以编辑 编辑就另存为 ...
- unity视频播放,
PC端视频播放: Unity中实现PC端播放视频,非常easy用到MovieTexture属于贴图Texture的子类. 在播放视频之前.我们得记得下载quicktime插件,仅仅有导入了quickt ...