15

次のコードがあります。

<!DOCTYPE html>
<html>
<head>
  <style>
     img
     {
         position:absolute;
         right:50px;
     }
  </style>
</head>

<body>
     <h1>This is a heading</h1>
     <img src="logocss.gif" width="95" height="84" />
</body>
</html>

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_rightから

h1 のスタイルを次のように変更すると: h1 { position:absolute; 右:50px; h1 と img の両方がオーバーラップします。

ここで、img や h1 の最上位については言及しませんでした。したがって、h1 にスタイルがなかった最初のケ​​ースでは、img は h1 をそのままにし、h1 の後の次の使用可能なスペースを占有し、右側 (50 ピクセル離れて) に配置されました。しかし、h1 が 50px 離れている (絶対配置で) と述べたとき、img と h1 の両方が重なりました。最上位について言及しなかったので、なぜ img は h1 だけを残して (オーバーラップするのではなく) フォローしないのでしょうか? トップ位置をあいまいに指定したままにする絶対配置を使用していることを理解していますが、なぜ img が top:0 位置を占める必要があると自動的に想定するのですか? h1 が top:0 の位置を占めていれば、最初の要素なので問題ありません。ただし、img は h1 のスペースを尊重する必要があります。

助けてくれてありがとう。

4

4 に答える 4

11

これはposition:absolute、ドキュメントのフローから要素を削除するためです。要素は絶対位置にあるため、スタックしません。

これを行うためのより良い方法は次のようになると思います：

h1, img{
    float:right;
    margin-right:50px;
    clear:both;
}

jsfiddle: http://jsfiddle.net/R7bXZ/

あなたにとってさらに良い方法：

h1 を与えるだけtext-align:right;です。

jsfiddle: http://jsfiddle.net/KvMLb/2/

于 2013-03-14T18:27:50.783 に答える
1

位置をimg占める理由は、として指定することにより、ページフローからそれを削除しているためです。その位置を計算しようとしますが、そこには表示されません。このJSFiddleがあなたのために働くかもしれないが、これを使用するだけでこれを回避する素晴らしい方法はありません。top: 0h1position: absoluteimgh1position: absolute

于 2013-03-14T18:30:16.357 に答える
0

絶対配置については、こちらをご覧ください: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

絶対配置を使用する場合、それを適用する要素は、簡単に言えば、ページおよび残りの要素から切断されます。それは基本的に、他の要素からの影響をゼロにして、その要素を独自に動作させることです。私が読んだことから、h1がどこにあるかを検出して回避するには、position:absolute imgが必要です。これは、position:absolute を使用して行うことはできません。それ自体は、そうしないように設計されています。

position: absolute を使用せずにそれを達成するのを支援できるように、これらを実際にどのように表示したいですか?

于 2013-03-14T18:27:56.637 に答える