1. ホーム
  2. css

[解決済み】要素を親からの相対的な位置に固定することはできますか?[重複している]。

2022-03-27 07:14:06

質問

<余談
この質問には、すでにここで回答があります :
クローズド 4年前 .

ある要素を固定配置すると、親が相対配置されていても関係なく、ウィンドウに対して相対的に固定配置されますね。

#wrapper {
  width: 300px;
  background: orange;
  margin: 0 auto;
  position: relative;
}

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}
<div id="wrapper">
    ...
    <a id="feedback" href="#">Feedback</a>
</div>

http://jsbin.com/ibesa3

解決方法は?

両方の質問にお答えします。あなたの既存のタイトル(および元の投稿)は、あなたが編集とその後のコメントで求めているものとは異なる質問を投げかけていることに注意してください。


親要素に対して相対的に配置する場合 が必要です。 position:absolute を子要素に、親要素にデフォルトまたは static 以外の任意の位置モードを指定します。

例えば

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

これは childDiv 要素を、parentDivの位置から左に50ピクセル、下に20ピクセル相対移動させます。


要素をウィンドウに対して相対的に配置する(quot; fixed" が必要です。 position:fixed を使用することができます。 top: , left: , right: および bottom: を自由に配置することができます。

例えば

#yourDiv { position:fixed; bottom:40px; right:40px; }

これは yourDiv は、ウェブブラウザのウィンドウに対して、下端から40ピクセル、右端から40ピクセルの位置に固定されています。