C# と VB.NET の質問掲示板

[環境]VisualStudio2005 ASP.NET(C#) + AjaxExtenstions

こんにちは
現在ASP.NET+C#で機器の配置図の表示を考えています。
イメージとしては、背景に簡易地図が表示され、その上に機器のアイコンが表示（簡易地図より前面に表示される）されるようなものです。
ここで背景および機器アイコンはImageコントロールを使用しようとしています。
機器アイコンは設定により位置変更できるようにするために、コードで作成します。
画面上では、Panelコンポーネントを配置して、その中に背景用Imageコントロールを配置しています。
Panelを置いているのは、配置図表示エリアを固定にして、背景用Imageが大きなものになっても、
ブラウザのページ全体をスクロールすることなくPanelのスクロールバーで表示箇所を移動することができると考えたからです。

機器アイコンはコードで以下のように作成しています。
背景図を格納するパネルをMapPanel
地図イメージをMapImage
作成するアイコンをICONとしています。

MapImage.ImageUrl = "map.jpg";

System.Web.UI.WebControls.Image ICON = new Image();
          
ICON.ImageUrl = "aaa.jpg";
ICON.ID = "ICON";
ICON.Style["Position"] = "Absolute";
ICON.Style["Top"] = "100px";
ICON.Style["Left"] = "150px";
ICON.Style["Zorder"] = "10";
MapPanel.Controls.Add(ICON);

ここで質問です。

MapImageサイズがMapPanelより大きい場合スクロールバーが表示され、希望の動作としては
MapImageに重ね合わせたICONがスクロールに連動してもらいたいのですが、Absolute指定した時点で、
MapPanelから切り離されてしまい、連動しません。
Absolute指定しなければ、MapPanelのスクロールバーに連動しますが、今度はMapImageと重ね合わせ
ICONを表示することができません。

何かうまい解決法はないでしょうか？
それとも根本から間違っているでしょうか？

■No12423 (かとけん さん) に返信
C#というかWeb サーバーコントロール云々ではなくって、CSS（Style指定方法）の問題なのではないでしょうか。
CSSの解釈はブラウザによって微妙に異なりますので、ブラウザに合わせて調整する必要がある点にご注意下さい。
以下の内容はVista上のIE7で確認している内容です。

Panel Web サーバーコントロールは、実行時にdiv要素を出力します。
Panelのサイズを指定して、ScrollBarsプロパティをAutoにすると
生成されるHTMLは
　<div id="Panel1" class="parentPanel" style="height:300px;width:500px;overflow:auto;">
といったようにoverflowが適用されて、内包される要素に応じてスクロールバーが出ますね。
次にベースとなるMapImageは、通常のimg要素として出力され
　<img id="ImageMap1" src="Images/map.jpg" style="border-width:0px;" />
特にposition/height/width指定がないので、親要素のdiv内に実サイズで生成されますから
この例でいけば、height:300px;width:500px以上の大きさであれば、スクロールバーが生成されます。
次にiconの表示になりますが、これもimg要素として出力されますが、position:absoluteになりますので
指定された位置に出力されます。
この時のposition:absoluteの基準になる矩形が、その親要素に基準となる指定がなされていない場合には、
body要素といいますか、ブラウザの表示領域の左上端が基準になります。
ご希望の動作でいうと、基準はPanel（div要素）が基準でposition:absoluteが効いていれば、
スクロールバーでスクロールさせた場合に、追従してスクロールします。

では、Panel（div要素）が基準でposition:absoluteを効かせるにはどうするか、ということになりますが
基準となる要素にposition:absolute | position:relative | position:fixedがあればよいということです。
（参考:http://www.seo-equation.com/html/css/box）

結論としては、以下のようなコードを試してみると良いかと思われます。

        this.MapPanel.Style.Add(HtmlTextWriterStyle.Position, "relative");

        Image mapImage = new Image();
        mapImage.ImageUrl = "map.jpg";
        this.MapPanel.Controls.Add(mapImage);

        Image iconImage = new Image();
        iconImage.ImageUrl = "icon.jpg";
        iconImage.Style.Add(HtmlTextWriterStyle.Position, "absolute");
        iconImage.Style.Add(HtmlTextWriterStyle.Top, "100px");
        iconImage.Style.Add(HtmlTextWriterStyle.Left, "150px");
        iconImage.Style.Add(HtmlTextWriterStyle.ZIndex, "10");
        this.MapPanel.Controls.Add(iconImage);


希望の動作イメージと異なっていたらごめんなさい。