0

物事を思い通りに配置できない理由について、私は少し困惑しています。

以下の例では、各数字が正方形の異なる隅にあると予想しています。しかし、最初の正方形では、「top:0px」が期待どおりに機能していないように見えます。2 番目の正方形では、緑色の正方形にあるはずのテキストが実際には青い四角。唯一の違いは、2 番目の画像に絶対位置を明示的に指定したことです。「下」に対する相対的な位置を指定する必要がありました。これは、動作すると予想される上を使用すると、2 番目の画像全体がほぼ下に垂直にオフセットされるためです。

ここで何が起こっているのですか？私は、単純な仕事だと思っていたことを達成しようと、何時間もこのために戦ってきました。

<!DOCTYPE html>
<html>
<head>
<body>
<span style="position:relative; ">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Solid_blue.png">
<span style="position:absolute; top:0px; left:0px;">1</span>
<span style="position:absolute; bottom:0px; left:0px;">&nbsp;2</span>
<span style="position:absolute; top:0px; right:0px;">&nbsp;&nbsp;3</span>
<span style="position:absolute; bottom:0px; right:0px;">&nbsp;&nbsp;&nbsp;4</span>
</span>
<span style="position:relative;">
<img style="position:absolute; bottom:0px; left:0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Solid_green.svg/200px-Solid_green.svg.png">
<span style="position:absolute; top:0px; left:0px;">5</span>
<span style="position:absolute; bottom:0px; left:0px;">&nbsp;6</span>
<span style="position:absolute; top:0px; right:0px;">&nbsp;&nbsp;7</span>
<span style="position:absolute; bottom:0px; right:0px;">&nbsp;&nbsp;&nbsp;8</span>
</span>
</body>
</html>
4

3 に答える 3

2

私は問題を見つけました、

ラッパースパンにフロートを設定する必要があります

例えば

<span style="position:relative; float:left; ">

   <img src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Solid_blue.png">
   <span style="position:absolute; top:0px; left:0px;">1</span>
   <span style="position:absolute; bottom:0px; left:0px;">&nbsp;2</span>
   <span style="position:absolute; top:0px; right:0px;">&nbsp;&nbsp;3</span>
   <span style="position:absolute; bottom:0px; right:0px;">&nbsp;&nbsp;&nbsp;4</span>

</span>
于 2012-04-21T19:06:29.253 に答える
0

スパンがブロックレベルの要素である必要があるためかもしれません。「display: block;」を追加してみてください。あなたの「位置：相対」要素に。

于 2012-04-21T18:41:39.200 に答える
0

span 要素はインラインであり、インライン要素にはディメンションがありません...そのため、要素が間違って配置されます。

外側のスパンを設定するとdisplay:inline-block、問題が修正されます。

( 2 番目の画像からも削除する必要があります。position:absoluteこれは、フローから削除し、含まれている画像spanのサイズが取得されないためです。 )

http://jsfiddle.net/gaby/btUBm/のデモ

于 2012-04-21T18:45:00.227 に答える