当 div 以负边距定位时，CSS 溢出-x 不会隐藏

Question

我有一个以负边距定位的 div，这样它将被隐藏，我将能够将它飞入屏幕。但是，我可以向右滚动并看到它。我试图将我的 body 和 html 标签中的overflow-x 属性更改为隐藏，但没有成功。我做错了什么？

我的 div 定位为 margin-right:-800px，但似乎没有任何效果！

---

编辑代码

CSS 代码：

隐藏div:

.card{
    z-index:21;
    position:absolute;
    right:-800px;
    background:white;
    border:1px solid black;
    margin:auto;
    text-align:left;
    padding:20px;
    visibility:hidden;
    -webkit-box-shadow: 5px 5px 5px rgba(110,110,110,.7);
    -webkit-transform:rotate(-100deg);
    -webkit-transition:right .5s, -webkit-transform .5s;
}

我的溢出尝试：

html {
    overflow-x:hidden;
    overflow-y:visible;
}

Answer 1

正如@Pranav 所说，我们真的不知道您是如何创建动画的。但是，这里有一个类似于您所描述的动画的工作示例：http://jsfiddle.net/Ktt4Z/2/。

JavaScript

$('#box').animate({  textIndent: 0 }, {
    step: function(now,fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
    },
    duration:'slow'
},'linear');​

HTML

<div class="card">
    This is a test. This is a test.
</div>​

另外，这里有一个很棒的 CSS overflow 资源： http://www.brunildo.org/test/Overflowxy2.html

最后，在发布问题时，最好发布您的代码、尽可能使用 JSFiddle 的简单示例以及您尝试过的任何内容。这将有助于社区研究和发现问题的答案。

---

编辑 0

试试：

display: none;

代替：

visibility:hidden;

此外，互联网上有一些关于visibility 和display 之间区别的有用文章。 For example, this article states the following:

在表面显示上：可见性似乎并不相同： 隐藏，但事实并非如此。最大的不同在于我喊出的那一点 以上。

visibility: hidden – 元素停留在正常的文档流中

display: none – 该元素已从正常文档流中移除，因此 周围的html元素折叠关闭空间