☰

要素を親に対して固定して配置できますか? [重複] 質問する

tag-icon • tag-icon css dom
要素を親に対して固定して配置できますか? [重複] 質問する

要素を固定して配置すると、親が相対的に配置されているかどうかは関係なく、ウィンドウに対して固定して配置されるのでしょうか?

#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

ベストアンサー1

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

親要素を基準にして要素を「固定」して配置するには、position:absolute子要素に を設定し、親要素にデフォルトまたは静的以外の位置モードを設定します。

例えば：

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

childDivこれにより、要素は parentDiv の位置に対して 50 ピクセル左、20 ピクセル下に配置されます。

要素をウィンドウに対して「固定」して配置するには、 が必要であり、 、、、 を使用して、適切と思われる位置に配置position:fixedできます。top:left:right:bottom:

例えば：

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

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

おすすめ記事