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 固定定位在网页主体部分最右侧的更多相关文章

  1. CSS Div固定在网页顶部、底部、左侧、右侧

    Div固定在网页顶部 .header { width:100%; height:80px; background-color:#FAFAFA; position:fixed; top:; left:; ...

  2. 固定定位下的div水平居中

    发现了一个之前未留意的知识点,做个笔记. 当一个块级元素的父元素开启了flex布局后,我们可以很轻松的将这个元素居中对齐,可以在父元素上加 justify-content: center; align ...

  3. css实现网页缩放时固定定位的盒子与版心一同缩放

    在网页设计过程中我们可能会出现这种情况:设置好一个固定定位的盒子,但是当网页缩放时固定定位的盒子与网页的版心分离 这是因为css定位中的固定定位是以页面为参照进行定位的,而不是以版心盒子为参照,那么我 ...

  4. css方法div固定在网页底部

    css .bottom{width:%;height:40px;background:#ededed;;}/*重点后两句*/ body <div class="bottom" ...

  5. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  6. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  7. 层模型--固定定位(position:fixed)

    fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身. 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口 ...

  8. CSS学习笔记10 相对定位,绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  9. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

随机推荐

  1. PHP使用Xdebug进行远程调试

    PHP使用Xdebug进行远程调试 翻译 by mylxsw posted on 2014/07/14 under 技术文章 > 编程语言 Xdebug提供了客户端与PHP脚本进行交互的接口,这 ...

  2. Linux常用命令-入门

    linux 开源安全性高 linux 和 windows 1.同时登陆多用户 2.安全 3.linux没有盘符的概念 /. /        root      根目录 4.linux的文件没有扩展名 ...

  3. 5 个 Composer 小技巧

    Composer是新一代的PHP依赖管理工具.其介绍和基本用法可以看这篇<Composer PHP依赖管理的新时代>.本文介绍使用Composer的五个小技巧,希望能给你的PHP开发带来方 ...

  4. php session 跨页失效问题

    原因是session.savepath 目录不存在或者没有读写权限

  5. 【运维工具】logrotate 日志管理神器

    服务器经常会产生各种各样的日志文件,我们需要定期清理 日志的分类 系统日志 应用日志 系统日志 例如系统的history 历史信息   crontab的运行日志  一般系统日志系统都帮我们运维好了,不 ...

  6. netbeans环境搭建

    1.下载文件http://pan.baidu.com/s/1kUu52mV 2.安装. 3.设置字体颜色,原先的太亮,我设置了保护色,参照sublime 我设置的字体高亮效果http://pan.ba ...

  7. js中将字符串转换成json的三种方式

    1,eval方式解析,恐怕这是最早的解析方式了.如下: function strToJson(str){ var json = eval('(' + str + ')'); return json; ...

  8. xml架构管理器

    http://technet.microsoft.com/zh-cn/dd489278

  9. JavaScript学习之cookies

    使用JavaScript操作cookies 一.什么是cookies? cookies是一种对客户端硬盘的数据进行存取的技术,这种技术能够让网站把少量的数据存储到客户端的硬盘,同时也能够从客户端的硬盘 ...

  10. Selenium2学习-025-WebUI自动化实战实例-023-页面快照截图应用之一 -- 常规截图(全页面)

    通常我们在进行自动化测试的过程中,有时候需要对页面进行截图,以保存此时的页面,用作后续的判断或测试报告.在 Web UI 自动化测试脚本过程中,通常有以下几种截图的要求: 常规截图 - 页面样式(全页 ...