CSSの質問です。

「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>

回答の条件
  • 1人2回まで
  • 登録:2007/06/11 03:51:02
  • 終了:2007/06/11 16:32:35

ベストアンサー

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522007/06/11 04:54:45

ポイント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> 
id:tobisugi

ありがとうございます。

実現したかった結果を得ることができました。

勉強になりました。

2007/06/11 16:26:45

その他の回答(1件)

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522007/06/11 04:54:45ここでベストアンサー

ポイント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> 
id:tobisugi

ありがとうございます。

実現したかった結果を得ることができました。

勉強になりました。

2007/06/11 16:26:45
id:aside No.2

aside回答回数339ベストアンサー獲得回数312007/06/11 09:29:34

ポイント30pt

残っている空枠はtableの枠なので、スタイルをテーブルに

移動するでおk?

<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>
id:tobisugi

すいません。

説明不足でした。

「position:relative」を利用して、要素を移動した場合に、移動元に空白ができてしまうので、デザインが崩れてしまい、困っていました。

今回の投稿は、空白が出ないようにする方法があるかの質問です。

2007/06/11 16:30:09

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません