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;"> 2</span>
<span style="position:absolute; top:0px; right:0px;"> 3</span>
<span style="position:absolute; bottom:0px; right:0px;"> 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;"> 6</span>
<span style="position:absolute; top:0px; right:0px;"> 7</span>
<span style="position:absolute; bottom:0px; right:0px;"> 8</span>
</span>
</body>
</html>
わからないなどのフロートを設定し、これを見てみましょう。 http://jsfiddle.net/RHRd9/1/ –