「position:relative;top:100px;left:100px;height:50px;width:50px;」を適用して「div」を移動した場合に、「div」の元あった位置に50x50の空白ができてしまいます。
空白を表示しない方法を知っている方いましたら教えてください。
例）
<html>
<body>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td>
<div style="position:relative;top:100px;left:100px;height:50px;width:50px;background-color:blue;">要素</div>
</td>
</tr>
</table>
</body>
</html>
No.1
379
52
70pt
空白が空くのは仕様通りの挙動です。
おそらく次のとおりでお望みの表示になるのではないかと思います。
<html> <body> <table cellpadding="0" cellspacing="0" border="1"> <tr> <td style="position:relative;display:block;"> <div style="position:absolute;top:100px;left:100px;height:50px;width:50px;background-color:blue;">要素</div> </td> </tr> </table> </body> </html>
No.1
37952
ここでベストアンサー
70pt
空白が空くのは仕様通りの挙動です。
おそらく次のとおりでお望みの表示になるのではないかと思います。
<html> <body> <table cellpadding="0" cellspacing="0" border="1"> <tr> <td style="position:relative;display:block;"> <div style="position:absolute;top:100px;left:100px;height:50px;width:50px;background-color:blue;">要素</div> </td> </tr> </table> </body> </html>
ありがとうございます。
実現したかった結果を得ることができました。
勉強になりました。
No.2
33931
30pt
残っている空枠はtableの枠なので、スタイルをテーブルに
移動するでおｋ？
<html> <body> <table style="position:relative;top:100px;left:100px;height:50px;width:50px;background-color:blue;" cellpadding="0" cellspacing="0" border="1"> <tr> <td> <div>要素</div> </td> </tr> </table> </body> </html>
すいません。
説明不足でした。
「position:relative」を利用して、要素を移動した場合に、移動元に空白ができてしまうので、デザインが崩れてしまい、困っていました。
今回の投稿は、空白が出ないようにする方法があるかの質問です。
9
9
1
1
1
ありがとうございます。
実現したかった結果を得ることができました。
勉強になりました。