实现 DIV 固定定位在网页主体部分最右侧
position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口。而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适应随着窗口大小变化,除了主体部分,其他部分都是留白处理。如下图所示:

要实现这个需求有两个解决办法:
1、css 中的固定定位思路
① 给这个 div (div 一定要在主体部分 div 里面)加一个父级 DIV;
② 设置父级 DIV 的样式:宽设置为 inherit,高等于 div 的高、position:fixed、top 设置离窗口的距离(left 不要设置)、z 轴随情况定;
③ 设置 div 的样式:float:right(不想最右侧,可以加个 margin-right)。
这样就搞定了,如下图所示:

2、js+css 实现思路
① 设置 div 的样式:position:absolute、top 设置离窗口的距离、right设置离主体部分右侧的距离;
② 用 js 来获取网页滚动距离,然后将 div 的 top 值加上这个滚动距离。
右下角的返回顶部就是通过第一个思路实现的,小伙伴们还在等什么。
实现 DIV 固定定位在网页主体部分最右侧的更多相关文章
- CSS Div固定在网页顶部、底部、左侧、右侧
Div固定在网页顶部 .header { width:100%; height:80px; background-color:#FAFAFA; position:fixed; top:; left:; ...
- 固定定位下的div水平居中
发现了一个之前未留意的知识点,做个笔记. 当一个块级元素的父元素开启了flex布局后,我们可以很轻松的将这个元素居中对齐,可以在父元素上加 justify-content: center; align ...
- css实现网页缩放时固定定位的盒子与版心一同缩放
在网页设计过程中我们可能会出现这种情况:设置好一个固定定位的盒子,但是当网页缩放时固定定位的盒子与网页的版心分离 这是因为css定位中的固定定位是以页面为参照进行定位的,而不是以版心盒子为参照,那么我 ...
- css方法div固定在网页底部
css .bottom{width:%;height:40px;background:#ededed;;}/*重点后两句*/ body <div class="bottom" ...
- position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- 层模型--固定定位(position:fixed)
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身. 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口 ...
- CSS学习笔记10 相对定位,绝对定位与固定定位
文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...
- 移动端底部fixed固定定位输入框ios下不兼容
简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...
随机推荐
- python 动态加载module、class、function
python作为一种动态解释型语言,在实现各种框架方面具有很大的灵活性. 最近在研究python web框架,发现各种框架中需要显示的定义各种路由和Handler的映射,如果想要实现并维护复杂的web ...
- Apache(Web)服务器性能调整
Apache多路处理模块---MPM apache通过不同的MPM运行在多进程和多线程混合模式下,增强配置扩充性能.MPM无法模块化,只能在编译配置时选择,被静态编译到服务器中.目前apache版本中 ...
- Machine Learning in Action -- Logistic regression
这个系列,重点关注如何实现,至于算法基础,参考Andrew的公开课 相较于线性回归,logistic回归更适合用于分类 因为他使用Sigmoid函数,因为分类的取值是0,1 对于分类,最完美和自然的函 ...
- 小米2/2S 手机由 Smartisan OS ROM 刷回 MIUI 教程
刷机所需文件1.请前往 MIUI 官网下载小米 2/2S 标准版 MIUI ROM 包.下载地址:http://www.miui.com/getrom.php?r=2:下载后请将原文件名修改为“upd ...
- 【转】Eclipse Class Decompiler——Java反编译插件
闲暇之余,写了一个Eclipse下的Java反编译插件:Eclipse Class Decompiler,整合了目前最好的2个Java反编译工具Jad和JD-Core,并且和Eclipse Class ...
- BLE链路层状态机
BLE的Link层,应当是了解BLE需要首先熟悉的一部分,BLE的Controller部分主要都在围绕这一部分实现的.Link层的内容规定了BLE底层是怎么实现蓝牙设备之间的控制,数据传输等等的.Li ...
- wpf前端设计
http://www.cnblogs.com/w-wanglei/archive/2016/03/14/5274298.html#_nav_0
- Solr分页与高亮(使用SolrNet实现)
Solr分页与高亮(使用SolrNet实现) 本节我们使用Asp.net MVC实现Solr客户端查询,建议使用SolrNet这个客户端,开源地址在:https://github.com/mausch ...
- npm的使用
npm的用途: 用官方的包 用其他人的包 传自己的包给别人用 一: 安装 1.用别人的: npm install argv 这样下载好之后,argv包就放在了工程目录下的node_modules目录中 ...
- Nmap 網路診斷工具基本使用技巧與教學
Nmap 是一個開放原始碼的網路掃描與探測工具,可以讓網路管理者掃描整個子網域或主機的連接埠等,功能非常強大. Nmap(Network Mapper)是一個開放原始碼的網路檢測工具,它的功能非常強大 ...