div 中的绝对 div 溢出答案

【问题标题】：absolute div in div with overflowdiv 中的绝对 div 溢出
【发布时间】：2013-01-14 17:56:39
【问题描述】：

我正在尝试制作一个位于 div 底部的选项卡菜单，当单击选项卡链接时，它的内容会向上滑动。

这是我到目前为止所得到的。我真的不明白它为什么会这样
http://jsfiddle.net/5mVt8/11/

关键位：

#content {  
  position: relative;  
  width:500px;  
  height:400px;  
  overflow:hidden;
}
.page {
    position: absolute;
  left:0;
  top:380px;
  width:500px;
  height:400px;
}

<div id="content">
  <div class="page" id="one"><a href="#one">Click</a>Page 1</div>
  <div class="page" id="two"><a href="#two">Click</a>Page 2</div>
  <div class="page" id="three"><a href="#three">Click</a>Page 3</div>
</div>

完整代码在这里：http://jsfiddle.net/5mVt8/11/

这些是绝对定位的 div 在相对 div 中溢出的错误吗？谁能告诉我为什么这不起作用或我应该如何批准？

【问题讨论】：

你应该说是什么bug。
看起来不错。你期望它的表现如何？
不是动画，（滑动）。
div 没有向上滑动。 div #page3 只是简单地跳到其余部分的顶部并高于它应有的位置。

标签： javascript jquery html css

【解决方案1】：

从您的 html 中删除 #one #two #three。

<div id="content">
    <div class="page" id="one"><a href="#">Click</a>Page 1</div>
    <div class="page" id="two"><a href="#">Click</a>Page 2</div>
    <div class="page" id="three"><a href="#">Click</a>Page 3</div>
</div>

现在只需正确编写动画即可。

 $('.page a').click(function(){ 
     $(this).parent('.page').animate({top:0}).addClass('open');
 });

http://jsfiddle.net/5mVt8/18/

编辑：我相信您可以找到一种更简洁的方式来编写您的 CSS。所有这些绝对值、定位和 z 索引。我会找到更好的方法来完成你想要的，但那就是我。

【讨论】：

效果很好，谢谢。我的主要错误是在 animate 属性中。
我什至不知道为什么，但是当我将文本留在其中时，它不会动画。奇怪，但它就是这样。

【解决方案2】：

您的#content 高度固定为overflow:hidden，底部的页面因溢出而部分隐藏。现在在链接点击锚点工作和#content 向下滚动到隐藏的块顶部。您应该在点击事件函数的末尾添加return false 以防止默认行为。

您也错过了animate method 语法。应该是这样的

$(this).parent().animate({'top': '0px'}, 300, "swing");

http://jsfiddle.net/5mVt8/27/

【讨论】：

我还为您制作了 css-animation 版本jsfiddle.net/5mVt8/32，只需要在 js 中进行类更改 :)
CSS 会更好，但仍不完全受支持，所以无论如何他都需要一个 javascript 后备。我喜欢 CSS 动画，但仍然没有。
Leeish，现在只有不到10的IE不支持css动画caniuse.com/#search=css%20transition，有些项目可以在IE中丢掉一些效果。
我觉得你。但是任何愚蠢到使用 IE 的人，很可能不会升级。我只是说 CSS 是更好的解决方案，但要正确，他仍然需要一个 javascript 后备。