绝对定位实现漂浮工具条停靠在内容旁边

浏览网站的时候经常会看到漂浮工具条，咱们很多项目也有漂浮工具条。
但是做这个效果的时候你会发现，改变窗口大小之后你原本设置好，刚刚好可以停靠在内容边边的工具条就跑到内容里面去了
怎么解决呢？
赶紧来看看新浪微博是怎么实现的！
http://weibo.com

效果：

原理
其实原理跟做绝对定位元素水平居中的道理是一样的，使元素居中，然后在向旁边偏移
内页是水平居中的，决定定位的漂浮工具条也是水平居中的，然后向右偏移，使其刚刚好停靠在内容旁边

如何实现呢？
1、HTML部分

<a class="W_gotop" id="base_scrollToTop" href="javascript:void(0);" style="visibility: visible;"><em class="W_ficon ficon_backtop">Ú</em>
</a>

2、CSS部分

.W_gotop { position: fixed;  _position: absolute;  bottom: 40px;  left: 50%;  margin-left:500px; display: block;  width: 40px;  height: 35px; padding-top: 5px; text-align: center; text-decoration: none;  cursor: pointer; opacity: 0.6;}
.W_gotop em { display: inline-block;  font-size: 20px; width: 26px; height: 30px; line-height: 30px;  line-height: 32px\9; overflow: hidden; color: #fff;}
.W_gotop:hover { opacity: 1;}
.W_gotop .W_ficon:hover {  color: #fff;}

position: fixed; 使其相对窗口定位
_position: absolute; 兼容IE6
left: 50%; margin-left:500px; 是元素水平居中，为什么是500px？因为内容的宽度是1000px

绝对定位实现漂浮工具条停靠在内容旁边相关推荐

CToolBar工具条控制方法
所谓工具条就是具有位图和分隔符组成的一组命令按钮,位图按钮部分可以是下推按钮.检查盒按钮.无线按钮等.工具条对象类派生于主窗口架框类CframeWnd或CMDIFrameWnd,其类控制CTool ...
13_MFC工具条和状态栏
MFC工具条和状态栏 Windows控制窗口 Windows (Windows95或者以上版本) 提供了系列通用控制窗口,其中包括工具条(ToolBar).状态栏(StatusBar).工具条提示窗口 ...
MFC 教程【13_MFC工具条和状态栏】
MFC工具条和状态栏 Windows控制窗口 Windows (Windows95或者以上版本) 提供了系列通用控制窗口,其中包括工具条(ToolBar).状态栏(StatusBar).工具条提示窗口 ...
MFC的工具条和状态栏
Windows控制窗口 Windows (Windows95或者以上版本) 提供了系列通用控制窗口,其中包括工具条(ToolBar).状态栏(StatusBar).工具条提示窗口(ToolTip ...
SwiftUI 仿头条工具条和内容联动切换TabView （教程含源码）
实战需求 SwiftUI 仿头条工具条和内容联动切换TabView 本文价值与收获看完本文后,您将能够作出下面的界面看完本文您将掌握的技能掌握TabView 实现页面切换实现上下联动基础知识 ...
matlab 显示绘图工具和停靠图形,4 7 交互式绘图工具ppt
•4.7 交互式绘图工具专题四专题四MATLABMATLAB绘图绘图 ""绘图绘图""选项卡选项卡 图形图形窗口绘图工具窗口绘图工具 图形图形窗口菜单和 ...
P73-前端基础项目开发-首页main部分开发工具条
P73-前端基础项目开发-首页main部分开发工具条 1.概述网页的右下角通常会有个工具条用来设置一些快捷操作,例如回到网页顶部. 2.工具条 2.1.工具条需求效果 2.2.创建工具条结构在in ...
[Eclipse]GEF入门系列（六、添加菜单和工具条）
我发现一旦稍稍体会到GEF的妙处,就会很自然的被它吸引住.不仅是因为用它做出的图形界面好看,更重要的是,UI中最复杂和细微的问题,在GEF的设计中无不被周到的考虑并以适当的模式解决,当你了解了这些,完 ...
实战ALV OO技术实现添加工具条按钮
REPORT Z_ALV_ERIC. *定义使用图标,按钮使用 INCLUDE <ICON>. *定义事件类型 CLASS LCL_EVENT_RECEIVER DEFINITION D ...
完美解决ALEXA工具条无法显示或显示白框
每次安装完alexa工具条就显示一个白框.跟别人的不一样!! ALEXA工具安装了好几次,打开IE的时候,总是只显示一个白框,没有正常的显示,一查才知道,是Windows XP SP2惹得祸,网上有人 ...

绝对定位实现漂浮工具条停靠在内容旁边

绝对定位实现漂浮工具条停靠在内容旁边相关推荐

最新文章

热门文章