私は修正しようとしていますdivので、それは常に画面の上部にくっつきます：

position: fixed;
top: 0px;
right: 0px;

ただし、はdiv中央のコンテナ内にあります。使用するposition:fixedとdiv、ブラウザウィンドウの相対位置が修正されます。たとえば、ブラウザの右側に当たるようになります。代わりに、コンテナに対して相対的に修正する必要があります。

をposition:absolute基準にして要素を修正するために使用できることはわかっていますがdiv、ページを下にスクロールすると、要素は消失し、のように上部に固定されませんposition:fixed。

これを達成するためのハックまたは回避策はありますか？

短い答え：いいえ。（CSS変換で可能になりました。以下の編集を参照してください）

長い答え：「固定」配置を使用する場合の問題は、要素がフローから外れることです。したがって、親がない場合と同じように、親に対して相対的に再配置することはできません。ただし、コンテナが既知の固定幅である場合は、次のようなものを使用できます。

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

編集（2015年3月）：

これは古い情報です。CSS3変換の魔法の助けを借りて、動的サイズ（水平および垂直）のコンテンツを中央揃えにすることが可能になりました。同じ原則が適用されますが、コンテナをオフセットするためにマージンを使用する代わりに、を使用できますtranslateX(-50%)。これは上記のマージントリックでは機能しません。幅が固定されていない限り、オフセットの量がわからないため、相対値（など50%）を使用できません。に適用されます。 transform動作が異なります。その値は、それらが適用される要素を基準にしています。したがって、は要素の幅の半分50%をtransform意味し50%、マージンは親の幅の半分を意味します。これはIE9 +ソリューションです

上記の例と同様のコードを使用して、完全に動的な幅と高さを使用して同じシナリオを再作成しました。

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

中央揃えにしたい場合は、次のようにすることもできます。

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

デモ：

jsFiddle：水平方向のみ中心
jsFiddle：中心水平方向と垂直方向の両方で
オリジナルクレジットは、ユーザーに行くaaronk6に私にそれを指摘するために、この答え

実際、これは可能であり、受け入れられた答えは集中化のみを扱います。これは十分に簡単です。また、JavaScriptを使用する必要はありません。

これにより、あらゆるシナリオに対応できます。

位置：絶対位置：相対コンテナー内に配置する場合と同じようにすべてを設定し、でdiv内に新しい固定位置divを作成します。position: absoluteただし、上と左のプロパティは設定しないでください。その後、コンテナに対して、好きな場所で修正されます。

例えば：

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}

<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

悲しいことに、このスレッドがAndroidのWebKitレンダリングのボックスシャドウのぼかしピクセルを固定位置要素のマージンとして解決することを望んでいましたが、それはバグのようです。
とにかく、これが役に立てば幸いです！

はい、仕様によると、方法があります。

Graeme Blackwood'sが受け入れられる答えであるべきだと私は同意しますが、それは問題を実質的に解決するので、固定要素をそのコンテナに対して相対的に配置できることに注意する必要があります。

申し込み時に偶然気づいた

-webkit-transform: translateZ(0);

ボディに対して、（ビューポートの代わりに）それに対して固定された子を作成しました。そのため、私の固定要素leftとtopプロパティは、コンテナーに相対的になりました。

だから私はいくつかの調査をしたところ、問題はすでにエリック・マイヤーによってカバーされており、それが「トリック」のように感じられたとしても、これは仕様の一部であることがわかりました：

レイアウトがCSSボックスモデルによって管理されている要素の場合、変換にnone以外の値を指定すると、スタックコンテキストと包含ブロックの両方が作成されます。オブジェクトは、固定配置された子孫の包含ブロックとして機能します。

http://www.w3.org/TR/css3-transforms/

したがって、親要素に変換を適用すると、それが包含ブロックになります。

だが...

問題は、このビットが仕様の一部ではないように見えても、要素が修正済みとして動作を停止するため、実装がバグ/クリエイティブのように見えることです。

同じ動作がSafari、Chrome、Firefoxにありますが、IE11にはありません（fixed要素はまだ固定されたままです）。

別の興味深い（文書化されていない）ことはしながら、固定要素は、形質転換された要素の中に含まれている場合ということであるtopとleft特性が今尊重、コンテナに関連するbox-sizingプロパティを、そのスクロールコンテキストボックスかのように、要素の境界にわたって延長します-sizingはに設定されましたborder-box。あるクリエイティブな人にとっては、これはおそらく遊び道具になるかもしれません:)

テスト

あなたが設定しない限り、left: 0またはright: 0divの位置を固定に設定した後であれば、答えはイエスです。

http://jsfiddle.net/T2PL5/85/

サイドバーdivをチェックアウトします。これは固定されていますが、ウィンドウの視点ではなく、親に関連しています。

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>

position: stickyこれは、概念的にに似てposition: fixedいる要素を配置する新しい方法です。違いは、指定されたオフセットしきい値がビューポートで満たされるまで、の要素はその親内でのposition: stickyように動作position: relativeすることです。

Chrome 56（2016年12月現在ベータ版、2017年1月に安定）の位置：stickyが復活しました。

https://developers.google.com/web/updates/2016/12/position-sticky

詳細は 「着陸スティック」にあります！位置：WebKitの粘着性のある土地。

2019ソリューション：position: stickyプロパティを使用できます。

以下は、使用例とCODEPENの違いを示すCODEPENの例ですposition: fixed。

以下にその動作を説明します。

1. スティッキー位置の要素は、ユーザーのスクロール位置に基づいて配置されます。基本的にposition: relative、要素が特定のオフセットを超えてスクロールされるまでのように動作します。その場合、要素は位置に変わります：固定。スクロールバックすると、以前の（相対）位置に戻ります。

2. これは、ページ内の他の要素のフローに影響を与えます。つまり、ページの特定のスペースを占有します（と同様position: relative）。

3. コンテナ内で定義されている場合は、そのコンテナを基準に配置されます。コンテナーにオーバーフロー（スクロール）がある場合は、スクロールオフセットに応じて、position：fixedになります。

したがって、固定機能を実現したいがコンテナ内では、スティッキーを使用します。

固定位置のdivから上部と左側のスタイルを削除するだけです。ここに例があります

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

#content divは、親divが配置されている場所に配置されますが、そこで修正されます。

このjQueryプラグインを作成して、コンテナー（表形式のデータ）が中央に配置されている場合と同様の問題を解決しました。リストがスクロールされたときにヘッダーをページの上部に固定する必要がありました。コンテナーを配置した場所（中央、左、右）に配置し、水平方向にスクロールしたときにページと共に左右に移動できるようにするための表データ。

この問題を解決できるこのjQueryプラグインへのリンクは次のとおりです。

https://github.com/bigspotteddog/ScrollToFixed

このプラグインの説明は次のとおりです。

このプラグインは、要素が垂直方向にビューの外にスクロールされた場合に、要素をページの上部に固定するために使用されます。ただし、水平スクロールで要素が左または右に移動し続けることができます。

オプションmarginTopを指定すると、垂直スクロールがターゲット位置に到達すると、要素は垂直上方への移動を停止します。ただし、ページが左または右にスクロールされると、要素は水平方向に移動します。ページがスクロールダウンされてターゲット位置を通過すると、要素はページ上の元の位置に復元されます。

このプラグインは、Firefox 3/4、Google Chrome 10/11、Safari 5、およびInternet Explorer 8/9でテストされています。

特定のケースでの使用法：

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});

私はクライアントがコンテンツ領域の外に座りたいと望んでいた広告でこれをしなければなりませんでした。私は単に以下を実行しました、そしてそれは魅力のように働きました！

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

2つのHTML要素と純粋なCSS（最新のブラウザー）

このjsFiddleの例を参照してください。サイズを変更し、固定要素がフロート要素と一緒に移動する様子を確認します。最も内側のスクロールバーを使用して、スクロールがサイトでどのように機能するかを確認します（固定要素は固定されたままです）。

ここでは多くが述べてきたように、一つのキーは上の任意の位置設定を設定されていないfixed（ノー要素top、right、bottom、またはleft値）。

むしろ、すべての固定要素（最後のボックスに4つあることに注意してください）を、配置するボックスの最初に配置します。

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

次に、を使用margin-topしmargin-leftて、次のCSSのように、それらをコンテナーに関連して「移動」します。

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

fixed要素は他のすべてのレイアウト要素を無視するため、フィドルの最後のコンテナには複数のfixed要素があり、左上隅に関連するこれらの要素がすべてあることに注意してください。しかし、これは、それらがすべてコンテナの最初に配置されている場合にのみ当てはまります。この比較フィドルは、コンテナのコンテンツ内に分散すると、配置が信頼できなくなることを示しています。ます。

ラッパーがstatic、relative、またはabsoluteであるかどうかは関係ありません。

私のjQueryプラグインFixToを試すことができます。

使用法：

$('#mydiv').fixTo('#centeredContainer');

相対固定位置を実現する別の奇妙な解決策は、コンテナーをiframeに変換することです。これにより、固定要素をページ全体ではなくコンテナーのビューポートに固定できます。

純粋なCSSでは、どうしてもそれを行うことができません。少なくとも私はしていません。ただし、jQueryを使用すると、非常に簡単に行うことができます。私の問題を説明します。少し変更するだけで使用できます。

まず、要素の上部（ウィンドウの上部から）を固定し、左側のコンポーネントを親要素から継承するようにしました（親要素が中央に配置されているため）。左のコンポーネントを設定するには、要素を親に入れて設定するだけですposition:relativeて、親要素にします。

次に、スクロールバーが上にあるとき（yゼロがスクロールされているとき）に、要素が上からどれだけあるかを知る必要があります。再び2つのオプションがあります。まず、それは静的（いくつかの数値）であるか、親要素から読み取る必要があります。

私の場合は、上から150ピクセルです。150が表示されたら、スクロールしていないときの上からの要素の量です。

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});

これは簡単です（以下のHTMLに従って）

トリックは、 "position：fixed;"の要素（div）の上部または左側を使用しないことです。これらが指定されていない場合、 "fixed content"要素は、囲んでいる要素（ "position：relative;"のdiv）に対して相対的に表示され、ブラウザウィンドウに対してINSTEAD OF !!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

上記では、垂直スクロールのあるdiv内の多くのテキストの上部に閉じる「X」ボタンを見つけることができました。"X"は所定の位置にあります（スクロールしたテキストでは移動しませんが、ユーザーがブラウザーウィンドウの幅を変更すると、囲んでいるdivコンテナーで左右に移動します！したがって、垂直方向に "固定"されますが、囲んでいる要素を水平に！

これが機能する前に、テキストコンテンツを下にスクロールすると、「X」が上にスクロールして見えなくなりました。

私のjavascript hideDiv（）関数を提供していないことをお詫びしますが、この投稿を不必要に長くすることになります。できるだけ短くすることにしました。

変換を使用してこれがどのように機能するかを実証するために、jsfiddleを作成しました。

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

同じ問題があり、チームメンバーの1人が解決策をくれます。divの固定位置と他のdivとの相対位置を許可するための解決策は、親コンテナーを使用して固定divをラップし、divをスクロールすることです。

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

CSS

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}

/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}

はい、要素の位置（topまたはleftなど）を設定しない限り可能ですfixed（marginただし、相対位置の設定には引き続き使用できます）。Simon Bos がこれについて少し前に投稿しました。

ただし、固定要素が固定されていない親戚でスクロールすることを期待しないでください。

こちらのデモをご覧ください。

私はしばらく前にそのようなことをしました。私はJavaScriptにかなり慣れていないので、もっと上手くできると確信していますが、ここが出発点です。

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

あなたはあなたの幅を設定する必要があります、そしてそれはそれからウィンドウの幅を取得し、数秒ごとにマージンを変更します。重いのはわかっていますが、動作します。

JavaScriptを使えば可能です。この場合、jQueryプラグインのSticky-Kitは次のとおりです。

私のプロジェクトは、Bootstrap 4を使用した.NET ASP Core 2 MVC Angular 4テンプレートです。次のように、最初の行のメインアプリコンポーネントhtml（つまりapp.component.html）に「sticky-top」を追加すると機能します。

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

それは慣例ですか、それとも私はこれを単純化しすぎましたか？

position:fixedCSSルールを使用し、top/ left/ right/ を適用しようとするとbottom、要素がウィンドウに対して相対的に配置されます。

回避策はmargin、top/ left/ right/の代わりにプロパティを使用することですbottom

これをチェックして：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>