0

一切都在这个JsFiddle中。我希望能够向上/向下移动 div .global-wrapper。我尝试在 2 个容器上设置许多不同的组合fixed和absolute位置，但是如果在过渡期间不解构包含的元素，我就无法使其工作。

一个解决方案可能是向上/向下移动 3 个元素.top .middle并.bottom使用 JavaScript，但如果可能的话，我更愿意将它们移动到“单个进程”中。

HTML

<div class="global-wrapper">
    <div class="global-container">
        <div class="top">TOP</div>
        <div class="middle">
            <div class="content">MIDDLE</div>
        </div>
        <div class="bottom">BOTTOM</div>
    </div>
</div>

CSS

.global-wrapper { height: 500px; width: 700px; position: absolute; top: 0%; }
.global-wrapper .global-container { height: 100%; width: 100%; position: fixed; }
.global-wrapper .global-container .top { height: 20%; width: 100%; background-color:blue; position: fixed; top: 0px; }
.global-wrapper .global-container .middle { height: 60%; width: 500%; overflow: hidden; background-color:green; position: absolute; top: 20%; }
.global-wrapper .global-container .middle .content { height: 100%; width: 100%; position relative; }
.global-wrapper .global-container .bottom { height: 20%; width: 100%; background-color:blue; position: fixed; bottom: 0%; }

更新：

这个结构值得解释一下，它实际上是一个简单的页面，有 2 个固定位置的导航栏（一个在顶部，一个在底部），中间有一个幻灯片（这就是为什么.middle div它比它的父级大）。

我希望能够上下移动整个结构（单击按钮时，但在这里无关紧要），以便将其中的一部分隐藏在窗口后面（例如，如果我设置top: -15%为.global-wrapper div我希望整个结构 15% 隐藏在顶部浏览器窗口后面）。

4

2 回答 2

1

我猜你正在寻找这样的东西：

工作示例

.global-wrapper .global-container:hover {
    transform:translatey(-150%);
    transition: all 3s;
}
.global-wrapper .global-container {
    height: 100%;
    width: 100%;
    position: fixed;
    transition: all 3s;
}
于 2013-09-05T16:59:08.507 回答
0

您与不同的班级自相矛盾。固定类是固定类。我建议您第二次从内容 div 中删除所有定位，并简单地使用父容器。

更改固定 div 的父 div 不会移动固定容器。您还会注意到绿色的中间 div 正在移动。这个没有固定的定位。

我希望这会有所帮助。

于 2013-09-05T16:49:45.007 回答