Question

我想在指定区域生成多个div。我想从数据库中加载这些div的父级的相对位置。

例如：

div 1 - 250px，100px
div 2 - 400px，800px
div 3 - 50px，85px

正如您所看到的，这里的问题是这些div没有按其相对位置的顺序加载。也会有重叠的div。

我如何将这些放置在与父母相对的正确位置。

我使用PHP将这些位置从MySQL数据库中加载出来，它们每个都有一个id和位置。我想将所有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事件来解决重叠问题，该事件将切换触发该事件的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事件附加到它们。在jQuery中它看起来像这样：

$('div div').mouseover(function() {
    $('div div').removeClass();
    $(this).addClass('mouseover');
});

和一点CSS来制作

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

在区域中生成多个div

2 个答案: