web-dev-qa-db-ja.com

CSS相対+右（または下）はほとんど機能しません

私はかなり長い間CSSを書いてきました。

気づいた

<div style="position: relative; right: 20%; bottom: 20%;">some text</div>

動作しない！

相対配置は、指定された左と上で機能しますが、右/下では機能しません。 どうして？

これを簡単に修正するには、代わりに「絶対」を使用して右/下をピクセルで指定しますが、理由が必要です。

また、間違っている場合は修正してください。外部コンテナが絶対的または相対的に配置されているかどうかに関係なく、そのコンテナの境界に対して「相対的」に何かを配置することはあまり意味がありませんか、またはコンテナ内の要素は常に「絶対的」に配置されるべきですか？

ありがとうございました。

csspositioncss-float
14
Akshay Sharma

From 絶対vs相対-CSSポジショニングの説明

相対配置では、絶対配置と同じ4つの配置プロパティを使用します。ただし、要素の位置をブラウザのビューポートに基づくのではなく、要素がまだ通常のフローにある場合の要素の位置から始まります。
14
oomlaut

相対配置は下/右の値で機能しますが、期待したとおりではありません。

http://cssdesk.com/RX24j

相対要素の位置の値をマージンとして考え、周囲の要素は単に無視します。 「マージン」は常に要素を通常のドキュメントフローの前の位置に相対的に移動しますが、同時に通常のフローから削除します。

通常のドキュメントフローから外れると、周囲の要素は通常のフローの元の位置にあるかのように動作しますが、そうではありません。これが、（Rel 1のように）相対要素がその親とオーバーラップできる理由です。

8
user2313440

やってみましたか？

<div style="position: relative; right: -20%; bottom: -20%;">some text</div>

というより

<div style="position: relative; right: -80%; bottom: -80%;">some text</div>
1
SoEzPz