最近在写项目时，遇到一个问题：
一个按钮，根据需求是要放在屏幕底部的位置，不随着页面的滑动而变化。看到这个需求，我就直接用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定位，不会产生动态固定的效果。
