绝对定位和overflow-y: scroll实现不使用fixed固定定位将元素固定在页面顶部或底部
2017-08-14 14:36
706 查看
使用position:fixed固定定位可以很方便将元素固定在页面某处。但是它和绝对顶部不同:绝对定位是相对于其position:absolute的父元素来定位;而fixed定位相对于屏幕;这导致在左右分别布局的页面上出现定位的元素在不同显示器或不同型号手机上出现偏差。使用绝对定位能通过相对父元素来保证定位元素在左边某处或右边某处。
此方法有两个步骤:1.需定位元素的css:
z-index: 90;
position: absolute;
top: 0;
width: 100%;
height: 40px;
(重点是position:absolute)
能滚动的元素的css:
position: absolute;
right: 0;
bottom: -2px;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
margin-top: 43px;
(margin-top是为了避免滚动区域被固定在顶部的固定元素挡住)
此方法有两个步骤:1.需定位元素的css:
z-index: 90;
position: absolute;
top: 0;
width: 100%;
height: 40px;
(重点是position:absolute)
能滚动的元素的css:
position: absolute;
right: 0;
bottom: -2px;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
margin-top: 43px;
(margin-top是为了避免滚动区域被固定在顶部的固定元素挡住)
相关文章推荐
- 移动网页 ----仿淘宝使用flex布局实现页面 固定顶部和底部
- 父级overflow为scroll时,绝对定位的子元素会被隐藏或一起滚动
- JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)
- jQuery实现页面滚动时元素智能定位,页面导航栏会自动定位到浏览器顶部
- 让页面目标元素 “固定” 在浏览器窗口的顶部 stickUp+jQuery.pin 插件 使用 单页导航
- 使用原生js的scrollTop,刷新进入页面定位到某一个dom元素
- jQuery固定元素插件scrolltofixed使用指南
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 使用js写点击一个事件使页面返回顶部以及控制一个元素在右下角的固定位置的方法
- 通过绝对定位absolute="fixed"实现网页内容的固定层效果
- 通过使用绝对定位和相对定位,实现div底部对齐
- scrollIntoView将指定元素定位到浏览器顶部,底部,中间
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 使用scrollIntoView方法定位页面元素---小结
- 实现页面某元素位置固定
- 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的web应用
- 通过jQuery来实现页脚永远固定在页面底部的效果
- android实现顶部底部固定 中间可滑动
- div footer标签css实现位于页面底部固定
- Javascript 瀑布流实现的两种方式:固定列数的浮动布局与绝对定位自适应宽度