html - 是否可以并排设置两个 div，而一个 div 在屏幕之外而不使用 display none 或 width zero？

Question

将它们并排放置是没有问题的。但是 - 一个 div 可以超出屏幕宽度吗？

我想在 DIV1 上方插入带有动画的 DIV2，而 DIV2 已经打开并准备好显示，但我不想玩它的宽度或显示，只改变位置，使其从侧面进入屏幕。

两个 div 的宽度和高度应为 100%。那可以怎样做呢？我可以将 overflow-x 设置为隐藏，所以没有水平滚动，但我认为它们两个的宽度 100% 都有问题。

请指教。

Answer 1

可以用绝对定位来完成。对于第二个 div 设置宽度:100% 和左侧:100%

<div id="wrapper">
    <div id="div1">
    </div>
    <div id="div2">
    </div>
</div>

CSS

#wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

#div1{
    background: yellow;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#div2{
    background: green;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 100%;
}

https://jsfiddle.net/p1ga7669/