0

すべてがこのJsFiddleにあります。div を上下に移動できるようにしたいと思い.global-wrapperます。fixed2 つのコンテナーのさまざまな組み合わせと位置を設定しようとしましたabsoluteが、移行中に含まれる要素を非構造化しないと機能しません。

.top .middle解決策は、3 つの要素を上下に移動し、.bottomJavaScript を使用することですが、可能であれば「単一プロセス」で移動することをお勧めします。

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 つのナビゲーション バー (上部に 1 つ、下部に 1 つ) と中央にスライドがある単純なページです (そのため、.middle divは親よりも大きいのです)。

ウィンドウの後ろにその一部を隠すために（top: -15%たとえば.global-wrapper div、構造全体が上部のブラウザー ウィンドウの後ろに 15% 隠されることを期待しています)。

4

2 に答える 2

0

あなたはさまざまなクラスと矛盾しています。固定クラスは固定クラスです。2 番目のコンテンツ div からすべての配置を削除し、単純に親コンテナーを使用することをお勧めします。

固定 div の親 div を変更しても、固定コンテナーは移動しません。また、緑色の中央の div が移動していることにも気付くでしょう。こちらは定位置がありません。

それが役立つことを願っています。

于 2013-09-05T16:49:45.007 に答える