人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>


●質問者: tobisugi
●カテゴリ:インターネット
✍キーワード:CSS TOP
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● wizemperor
●70ポイント ベストアンサー

空白が空くのは仕様通りの挙動です。

おそらく次のとおりでお望みの表示になるのではないかと思います。


<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> 
◎質問者からの返答

ありがとうございます。

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

勉強になりました。


2 ● aside
●30ポイント

残っている空枠は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>
◎質問者からの返答

すいません。

説明不足でした。

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ