使用position:fixed固定定位可以很方便将元素固定在页面某处。但是它和绝对顶部不同:绝对定位是相对于其position:absolute的父元素来定位;而fixed定位相对于屏幕;这导致在左右分别布局的页面上出现定位的元素在不同显示器或不同型号手机上出现偏差。使用绝对定位能通过相对父元素来保证定位元素在左边某处或右边某处。绝对定位和overflow-y: scroll实现不使用fixed固定定位将元素固定在页面顶部或底部

此方法有两个步骤:1.需定位元素的css:

  1. z-index90;
  2. positionabsolute;
  3. top0;
  4. width100%;
height40px;

(重点是position:absolute)

能滚动的元素的css:

  1. positionabsolute;
  2. right0;
  3. bottom-2px;
  4. left0;
  5. top0;
  6. -webkit-overflow-scrollingtouch;
  7. overflow-yscroll;
  8. margin-top43px;
(margin-top是为了避免滚动区域被固定在顶部的固定元素挡住)

绝对定位和overflow-y: scroll实现不使用fixed固定定位将元素固定在页面顶部或底部绝对定位和overflow-y: scroll实现不使用fixed固定定位将元素固定在页面顶部或底部


相关文章: