[解決済み] 位置は固定だが、容器に対して相対的

質問

を修正しようとしています。 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/03):

これは古い情報です。 CSS3 transform の魔法の力を借りて、動的なサイズのコンテンツを（水平方向と垂直方向の）中央に配置することができるようになりました。 同じ原理が適用されますが、コンテナのオフセットにマージンを使用する代わりに、次のように使用できます。 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 にてご指摘いただきました。 この回答