.floor-box{width: 44px; border: 1px solid #ccc; position: fixed; left: %; z-index: }

漂浮距离，距中间50%

.floor-box{width: 44px; border: 1px solid #ccc; position: fixed; left: 50%; margin-left: 620px; bottom: 30px; background: #fff; z-index: }

漂浮距离：距离中间50%，在减去620px

fixed的left:50%,漂浮的更多相关文章

  1. position fixed 居中

    1.水平居中.footer { height: 10%; text-align: center; position: relative; left: 50%; transform: translate ...

  2. iphone/ipad前端开发技巧

    iPad开发的局限性 在iPad上使用Safari浏览普通网站网页的时候,网页因为太大而导致需要手动放大缩小或者滑动,虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道,但时间久了我们还是会发现 ...

  3. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  4. JS原生第七篇 （帅哥）

    1.1 复习 offset   自己的 偏移 offsetWidth    得到自己的宽度 offsetHeight 构成 :   width  +   padding  +  border div ...

  5. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  6. 物联网平台设计心得：DateTimePicker实现选择联动

    所谓的选择联动,就是指,当我DateTimePicker1选择2月4号的时候,我DateTimePicker2只能选择2月4号和2月5号两天,当然你可以自行规定要选择的日期.这在一些图表查询条件里面是 ...

  7. the pipeline of call SNP

    ######################################## ############### Mapping ################ ################## ...

  8. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  9. 重温布局（display）

    无聊,从新复习了一遍,基础布局,记录一下,避免忘了. 首先说一下 Css文件前缀 Firefox:-moz-box-shadow Safari:-webkit-box-shadow Opera:-o- ...

随机推荐

  1. 【51NOD 1478】括号序列的最长合法子段

    很恶心啊,一道水题改了半天,主要是各种细节没有注意到,包括左括号剩余时有可能会出错的情况,需要从后往前扫 贡献一组测试数据: ((()))())(())(( 答案:8 1 #include<cs ...

  2. solr-5.3部署到tomcat

    下载 solr 5.3 版本: http://www.apache.org/dyn/closer.lua/lucene/solr/5.3.0 下载 Tomcat(6以上版本),另外可以根据系统下载 3 ...

  3. [poj2406] Power Strings

    Description 对于两个字符串a,b,定义a×b为将b接到a的末尾组成新的字符串.对于一个字符串a的幂运算的定义与我们在数学中的定义一样:a0=''(空字符),an+1=an×a. Input ...

  4. 【BZOJ-1787&1832】Meet紧急集合&聚会 倍增LCA

    1787: [Ahoi2008]Meet 紧急集合 Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 2259  Solved: 1023[Submit] ...

  5. 【BZOJ-1076】奖励关 概率与期望 + 状态压缩DP

    1076: [SCOI2008]奖励关 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1602  Solved: 891[Submit][Status ...

  6. 【BZOJ-4514】数字配对 最大费用最大流 + 质因数分解 + 二分图 + 贪心 + 线性筛

    4514: [Sdoi2016]数字配对 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 726  Solved: 309[Submit][Status ...

  7. 如果把表单数据的校验交给了javascript那么后台还有没有必要对数据做校验呢

    现在很多同事,包括我,我表单的数据验证交给了javascript来做,那么新的问题来了,如果交给了javascript那么后台还有没有必要对数据做校验呢

  8. 【bzoj3674】 可持久化并查集加强版

    http://www.lydsy.com/JudgeOnline/problem.php?id=3674 (题目链接) 题意 维护并查集3个操作:合并:回到完成第k个操作后的状态:查询. Soluti ...

  9. JSP_通过表格显示数据库的信息

    在本篇文章中,小编将介绍在jsp页面中通过表格显示数据库的实现:下面我们以“新闻发布系统”中显示一级标题的信息为例进行讲述,在新闻发布系统中存在一二级标题,在后台可以对标题进行管理,可查询标题等信息 ...

  10. Linux Nginx(master-slave)、Apache(woker、prefork) Working Mode Research

    catalog . Apache工作模式 . Nginx工作模式 1. Apache工作模式 Apache服务器支持三种工作模式(Apache称之为MPM,简写为Multi-Processing Mo ...