web-dev-qa-db-ja.com

親divを基準にした位置の固定

要素の位置を修正することは可能ですかブラウザウィンドウではなく、親divを基準にして？

私が持っていると言います：

<div id="pagecontainer">

    <div id="linkspage">

        <div class="sidelinks">
            <a href="#page1" class="link">Link 1</a>
            <p>
            <a href="#page2" class="link">Link 2</a>
            <p>
            <a href="#page3" class="link">Link 3</a>
            <p>
            <a href="#page4" class="link">Link 4</a>
            <p>
        </div>

        <div class="linkscontent">
            content of links page
        </div>

    </div>

    //OTHER PAGES

</div>

基本的に2つのセクションを持つページです。左側のセクションはリンクのリストであり、右側のセクションはページのコンテンツです。コンテンツをスクロール可能にしたいのですが、リンクを親の#pagecontainerに固定したままにして、＃pagecontainerがスクロールしてもスクロールしないようにしますが、ブラウザーウィンドウ全体をスクロールするとリンクは移動します。

私はすでにJQuery「fixto」プラグインを試しました： https://github.com/bbarakaci/fixto 。しかし、親要素（#pagecontainer）のアルファが0の場合、ページがフェードイン/アウトし、スクリプトにバグが発生するため、これを使用することはできません。

ありがとう。

csspositioncontainersparentfixed
13
Windbrand

親に与えるposition: relative、 このような：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
}

[〜＃〜] demo [〜＃〜] を参照してください。

37
zakangelle

私はこれを作成しました CodePen あなたのために。

あなたの説明から、それはそこに半分あります。

しかし、ブラウザウィンドウ全体をスクロールすると、それらは移動します。

iframe または何らかのJavaScriptソリューションを使用する必要があります。

1
Alen