最近在写项目时，遇到一个问题：

一个按钮，根据需求是要放在屏幕底部的位置，不随着页面的滑动而变化。看到这个需求，我就直接用fixed定位写了。但是测试的时候发现，这个按钮在安卓上是可以正常固定在屏幕底部的，但是ios端会随着页面的滚动被滑走。

查了一下是因为ios不支持fixed定位。

于是改用absolute定位，具体思路如下：

外层的容器设置一个高度，定位方式为相对定位，overflow:属性设置为hidden。
外层容器当中放两个容器：
a. 不需要fixed定位的容器，高度设置为100%,overflow:属性设置为auto
b. 需要固定在屏幕上的容器，设置为绝对定位，并且给出具体的位置。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>absolute模拟fixed定位效果</title>
<style>
*{
  margin: 0;
  padding: 0;
}
body{
  height: 500px;
}
.parent_body{
  width: 80%;
  height: 100%;
  margin: 50px auto;
  border: 1px solid;
  position: relative;
  overflow: hidden;
}
.child_body{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: orange;
}
.content_body{
  width: 120%;
  height: 120%;
}
.fixed_div{
  position: absolute;
  right: 10px;
  bottom: 10px;
}
</style>
</head>
<body>
  <div class="parent_body">

    <div class="child_body">
      <div class="content_body">
        我是content_body，我里面放内容
      </div>
      <div class="content_body">
        我是content_body，我里面放内容
      </div>
    </div>

    <div class="fixed_div">我是fixed_div，我需要一直停留parent_body右下侧</div>

  </div>
</body>
</html>

顺便回顾一下position的五个定位方式。

一、postion属性的作用

position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有5个值。

static
relative
absolute
fixed
sticky

static

static，文档流定位，是position属性的默认值，当position被设置为文档流定位时，浏览器会根据源码的顺序，决定每个元素的位置。每个块级元素占据自己的位置，元素与元素之间不产生重叠。

由于元素的位置是由浏览器计算的，所以如果设置了top,bottom,left,right属性则会无效。

relative,absolute,fixed

这三个定位之所以放在一起，是因为三者有一个共同点：都是相对于某个基点的定位。

relative属性

relative：相对定位，是基于自己原本的static时位置的位置进行定位，也就是说，它的定位基点是它自己默认的位置。

当元素只设置了position:relative时，它的位置并不会发生变化，只有设置了top,bottom,left,right这四个属性为非0时，它的位置才会发生偏移。

absolute属性

absolute：绝对定位，是基于自己的父元素进行偏移的，即定位基点是父元素。但是，这个父元素不能是文档流定位（static定位）如果父元素是文档流定位，那么绝对定位的元素会继续向上查找，一直找到其上级元素不是文档流定位，或查找到body元素为止。

简而言之，绝对定位的定位基点是距离它最近的非static定位的上级元素或body。

绝对定位也需要搭配top,bottom,left,right这四个属性。

绝对定位的元素会被文档流忽略，设置了文档流定位的元素，就相当于从一个平面的空间脱离了出来，浮在上层，所以它的位置不会被保留，而是被后面的元素所占据。周边的元素也就不会受到影响。

fixed属性

fixed：固定定位。是相对于浏览器窗口进行定位的。也就是说，它不会随着网页的向下滑动而变化，比如我们经常在各种网页看到的浮窗广告。

它搭配top,bottom,left,right属性一起使用时，表示元素的默认位置。

sticky属性

sticky属性是css3中的一个新的属性，它像是相对定位和固定定位的结合：比如一些网站的搜索工具栏，初始加载时是在自己的默认位置（相对定位），向下滚动之后固定在页面顶部不再变化。等页面重新向上滚动回到原位。

sticky属性必须有top,bottom,left,right这四个属性一起使用，否则等同于relative定位，不会产生动态固定的效果。

IOS不支持fixed定位&&position定位