您的位置:首页 > Web前端 > CSS

绝对定位和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是为了避免滚动区域被固定在顶部的固定元素挡住)



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐