将div移到另一个内部而不超过宽度

Question

我将创建一个js效果，在100％div内向右移动100％div。

更好地解释：想象一下宽度为1000px，高度为500px的div。在这个div里面，我们有另一个同样大小的div。但是，这应该向右滑动，以显示菜单。

这是我的css和html代码：

.mainview { width: 500px; height: 1000px; border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; background: #fff; -webkit-box-shadow: 0 0 8px 2px rgba(0,0,0,0.1); box-shadow: 0 0 8px 2px rgba(0,0,0,0.1);  border: 1px solid #ccc; margin: 20px auto;}


.foreground { display: block; position: relative; z-index: 990; width: 100%; height: 100vh; background: rgba(0,0,0,0.3); left:200px  }



<div class="mainview">

<div class="foreground">
this black area will slide to the right --->
</div><!-- @end of foreground  -->


</div><!-- @end of mainview -->

这里是JsFiddle文件http://jsfiddle.net/ZTmFY/

在示例中，div以我想要的方式向左移动，但超出了div的限制。我想要额外的宽度边，保持隐藏，就像附加的例子

Answer 1

将css属性overflow设置为具有类hidden的元素的mainview

DEMO