html - 垂直固定 div，但水平距离它的容器 30px

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

这看起来不错，但是当您水平调整屏幕大小时，按钮应该在黄色容器内水平保持 30 像素 - 我该如何实现？请记住 - 滚动时按钮需要保持垂直固定!

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