javascript - 如何使用CSS将嵌套元素设置到屏幕边缘

Question

我有两个嵌套的 div，一个在屏幕右侧定义了一个咏叹调，另一个是 100%。我正在尝试将子 div 设置为屏幕左侧而不是右侧的动画。我无法为父 div 设置动画，因为它有其他子项，我尝试使用新的 css3 vw 单位，但我需要将值设置为负单位才能向左移动。我通过获取它旁边的元素的大小并为该数量设置负动画来使它起作用，但是一旦您重新调整窗口大小，它就会移动到不合适的位置。

我的 CSS 是:

#sideParent
{
    position: absolute;
    top: 150px;
    bottom: 0px;
    right: 0px;
    width: 300px;
    border-top: 3px solid black;
    border-left: 3px solid black;
    text-align: center;
}
#sideChild
{
    position: absolute;
    top: 0px;
    left: 0px; /* I need this to position to left of screen with a static value */
    right: 0px;
    height: 100%;
    width: 100%;
    background-color: white;
    z-index: 100;
    border-right: 3px solid black;
}

如果没有其他解决方案，则必须有一种方法来检查何时重新调整屏幕大小并相应地更改负值。如果没有人能为最初的问题提出解决方案，有人可以解释一下如何做到这一点吗？

提前致谢。

Answer 1

您需要先使父级为屏幕的全宽。然后，您可以一次为一个 child 制作动画。看看这个问题:

How to make a <div> always full screen?

改变你的父 div css:

#sideParent
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
}

然后您可以将子 div 从 right: 0 动画化到 left: 0

只需确保您的父 div 是 body 元素的第一个子元素，这应该很有效。