領域内に複数のdivを生成する

Question

指定した領域に複数のdivを生成したい。私はデータベースからこれらのdivの親に相対位置をロードしたい。あなたが問題を見ることができるようには50px、85px

-

1. divの1 - 250ピクセル、100ピクセル
2. のdiv 2 - 400ピクセル、800ピクセル
3. DIV 3：例えばだから、

   ここでは、これらのdivが相対的な位置の順番でロードされていないことです。重複するdivも存在します。

   親に対して正しい相対的な位置にこれらを配置する方法はありますか。

   これらの場所をPHPを使用してMySQLデータベースからロードすると、それぞれにIDと場所が割り当てられます。私は1つの親divにすべてのdivを配置したい。

   CSSで相対位置と絶対位置の両方を使用しようとしましたが、希望の結果が得られませんでした。

Answer 1

親を相対的または絶対的な位置にします。次に、すべての子供に、データベースから来た左と上の「絶対」の位置を与えます。

HTML：

<DIV id="parent"> 
    <DIV STYLE="left: 25px; top: 10px">DIV 1</DIV> 
    <DIV STYLE="left: 40px; top: 80px">DIV 2</DIV> 
    <DIV STYLE="left: 50px; top: 85px">DIV 3</DIV> 
</DIV> 

CSS：ここ

#parent { 
    position: relative; 
    left: 0px; 
    top: 0px; 
} 

#parent DIV { 
    position: absolute; 
} 

フィドル：http://jsfiddle.net/xgG2C/

Answer 2

は、あなたが任意の順序でこれらのdivをロードし、onmouseoverイベントを取り付けることにより、overlapingの問題を解決することができ、それはそのイベントをトリガーしたDIVのために最高のz-indexをトグルし、そのDIVが他と重複するようにします

echo '<div>'; 
while ($row = mysql_fetch_assoc($mysqlResult)) { 
    echo '<div style="position:absolute;top:'.$row['top'].'; left:'.$row['left'].';"></div>'; 
} 
echo '</div>'; 

DIVが準備できたら、onmouseoverイベントをそれらに添付できます。より多くの情報を提供してください

div div {z-index:1} 
div.mouseover {z-index:1000}