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

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

1 个答案: