将div垂直固定，但距离它的容器

Question

有一个相对宽度（50％）的父容器，以便它响应屏幕的大小。

现在，我想要一个位于此父容器右下角的按钮，该按钮保持 垂直固定 。它适用于position: fixed但是当我在不同的设备上查看时，我无法将其水平放置。

这是我的html和CSS

<div class="container">
  <div class="button"></div>
</div>

.container {
  position: relative;
  height: 2000px;
  width: 40%;
  margin: 0 auto;
  background: yellow;
}

.button {
  height: 50px;
  width: 50px;
  background: red;
  position: fixed;
  bottom: 20px;
  right: calc(50% - 190px);
}

以下是codepen http://codepen.io/anon/pen/VmggdO

的链接

这看起来很好但是当你水平调整屏幕大小时，按钮应该在黄色容器内水平放置30px - 我如何实现这一目标？记住 - 当你滚动时，按钮需要垂直固定！

Answer 1

使用绝对位置为我工作

.button {
  height: 50px;
  width: 50px;
  background: red;
  position: absolute;
  bottom: 20px;
  right: 30px;
}

修改

根据“滚动时需要垂直固定”的新要求，可以通过将html更改为：

<div class="container">
</div>
<div class="button-container">
  <div class="button"></div>
</div>

以及CSS：

.container {
  position: relative;
  height: 2000px;
  width: 40%;
  margin: 0 auto;
  background: yellow;
}

.button {
  height: 50px;
  width: 50px;
  background: red;
  margin-bottom: 20px;
  float: right;
  margin-right: 30px;
  z-index: 100;
}

.button-container{
  position: fixed;
  bottom: 0px;
  width: 40%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

请参阅更新后的代码笔：http://codepen.io/anon/pen/mOvvgJ