Question

我想弄清楚的是如何设置一个div，它将从位于页面中间的div中间开始。 div最初应该不有position: absolute。除非不可能，否则我希望不要从头开始，因为在它下面有任何数据似乎很难。它不会是那么大的盒子。我猜测高度在100px到600px之间，宽度在400px到800px之间。

我最初发现这个JsFiddle Example做得很好，几乎就是我需要的。但div以绝对位置开始，它已经位于页面的右下方以进行动画处理。

一旦div位于页面的右下角，就需要将其固定在那里，以便我可以在不移动的情况下向上和向下滚动页面。 此时我不担心能够将其推回原来的位置。

我尝试了几件事：将其排列在我想要的位置，然后点击一个按钮，添加一个属性为position: absolute的类并调用animate函数像这样：

chatWindow.stop().animate({
         bottom: 0
       , right: 0
    }, 2000);

但我的猜测是，它最初需要设置在top: 0; left: 0中设置的位置以及它为何无法工作。

我已经让它在没有任何动画的情况下工作，并且希望能够弄清楚如何为这个东西制作动画。没有动画，就像用一个具有position: fixed; bottom: 0; right: 0的正常位置属性来切换一个类一样简单。

这是我创建的Codepen Example，以显示除了右边的动画部分之外我还需要什么。任何帮助都会很棒，因为我已经玩了很长时间了。

Answer 1

如果您想要从左到右制作动画，则必须使用left和top值。但负面的一点是会导致一个奇怪的动画，因为你想在开头保持一个relative的位置。因此，当你进行动画时，它将从窗口的最左上角开始，这是不好的。

Like this

为避免这种情况，您必须在开始状态下使用absolute位置。你在你的问题中说过你不想要它，但我认为需要获得想要的视觉效果。

See here the live example with good effect

但是，为了保持一个非常好的动画，但我知道它不是你想要的，你可以使用right和bottom值。它将使框显示在窗口的右下角。

Like this

Answer 2

根据您的codepen示例中的内容，仍然使用绝对定位的一种可能性是通过添加以下CSS伪造当前定位：

.container {
  padding-top: 250px;
}
.center-window {
  position: absolute;
  right: 50%;
  margin-right: -200px; /* i.e. half of its width */
  bottom: 100%;
  margin-bottom: -250px; /* i.e. its height */
}

然后，您可以相应地设置右侧，底部和边距属性的动画。请参阅https://codepen.io/anon/pen/RaOJYY（尽管它目前没有对填充做任何事情）。当然，如果你不确定.center-window的维度，也许这个解决方案可能不会有用。

将屏幕中间div到屏幕右下角的div设置为固定位置

2 个答案: