Question

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

解决方案可能是使用JavaScript向上/向下移动3个元素.top .middle和.bottom，但如果可能的话，我宁愿在“单个过程”中移动它们

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％。

Answer 1

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

<强> Working Example

.global-wrapper .global-container:hover {
    transform:translatey(-150%);
    transition: all 3s;
}
.global-wrapper .global-container {
    height: 100%;
    width: 100%;
    position: fixed;
    transition: all 3s;
}

Answer 2

你与不同的阶级自相矛盾。固定类是固定类。我建议您从第二个内容div中删除所有定位，只需使用父容器。

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

我希望有所帮助。

如何垂直移动包含固定和绝对元素的块

2 个答案: