web-dev-qa-db-ja.com

別のDiv内の固定位置Div

Divが1つありますposition:fixed;と私の問題は、固定された位置がすべてのページに対して相対的であることです。固定されたdivは、ページの中央に配置され、自動マージンのある他のdiv内にとどまる必要があります。同じ位置のdiv）。

Jqueryプラグイン StickyScroll を使用していますが、Internet Explorerで機能させることができません。

解決策はjquery/javascript、cssにあります。

ありがとう

javascriptjqueryhtmlcsscss-position
17
Sbml

次に、固定配置ではなく、絶対配置が必要です。

セットする position: absolute;配置する要素上。セットする position: relative;を中央のdivに配置して、要素を内部に配置できるレイヤーにします。

16
Guffa

これを実現するためにjQueryやJavaScriptは絶対に必要ありません。これはあなたが必要とするものです：

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
}
.inner {
    width:50px;
    border:1px solid white;
    position:fixed;
}
<div class="outer">
    <div class="inner">some text here
    </div>
</div>

これを見てください： http://jsfiddle.net/2mYQe/1/

5
George Katsanos

George Katsanosのコードを少しだけ変更しただけで役立つ場合があります。

.outer {
    width:200px;
    height:300px;
    background-color:red;
    margin:0 auto;
    overflow:auto;    
}

.inner {
    width:182px;
    border:1px solid white;
    position:absolute;
    background-color:buttonface;
}

サンプル： http://jsfiddle.net/2mYQe/480/

4
Vishal Vaishya

正しい解決策は「フレックス」です。元の投稿から3年が経過しているため、IE8のサポートを無視して、このソリューションをサポートするより最新のブラウザーを支持できると仮定します。

ここで多くの人が指摘したように、提案されたすべてのソリューションは問題に直面しています。コンテンツ領域の最初の項目が絶対位置のヘッダーから非表示になっている、またはコンテンツ領域が親の完全な高さを消費していることから、ヘッダーを全体の高さから差し引かない限り、コンテンツ領域の下部が切り取られるリスクがあります。 （例：高さ：calc（100％-"ヘッダーの高さ" px）これは、CSSにハードコードされた値があることを意味します...または、スクロールバーが親レベルで設定されているため、ヘッダーがそのために戦っています不動産。

これらのハックソリューションを回避するには、以下の「フレックス」ソリューションを使用します。

<div style="width: 200px; float: right; border: 1px solid black;
    display: flex; flex-direction: column;">
    <div style="width: 100%;">
        <div style="width: 100%;">
            I'm a header
        </div>
    </div>

    <div style="width: 100%; height: 100%; overflow:auto;">
        <div style="height:900px; background-color:lavender;">content area</div>
    </div>
</div>
0
spyder1329