PHP循环生成数据库结果的div堆叠重叠问题求助

这问题的核心原因一目了然——你给.leaders类设置了position:absolute，这会让每个div都脱离正常的文档流，它们会默认定位到页面的同一个起始位置，自然就互相堆叠在一起了，margin-bottom对绝对定位的元素完全起不到你想要的“隔开上下元素”的作用。

下面给你两种可行的解决思路，优先推荐第一种：

思路1：移除绝对定位，回到正常文档流 #

这是最稳妥的方案，让元素遵循默认的文档流排列，margin-bottom就能正常生效了。只需要修改你的CSS，去掉position:absolute即可：

.leaders {
    width:265px;
    height:100px;
    background-color: #ee845b;
    margin-left: 900px;
    margin-top:40px;
    margin-bottom:20px; /* 改成你需要的间距，不用500px这么大 */
    padding:10px;
    text-align:right;
    color:white;
    font-size: 20px;
    border:1px solid black;
    padding-top:10px;
}

如果你的布局需要让这些div始终靠右对齐，也可以把margin-left:900px换成margin-left:auto，这样不管页面宽度怎么变，div都会自动靠右，更灵活。

思路2：保留绝对定位，动态设置top值（不推荐，仅适合特殊布局） #

如果你的页面布局必须用绝对定位，那需要在PHP循环里给每个div计算并设置不同的top值，让它们错开位置：

首先修改PHP代码，添加动态top偏移：

$currentTop = 40; // 初始的top偏移量
while ( $row = mysqli_fetch_assoc($result) ) {
    echo '<div class="leaders" style="background-color:#ada30a; top: ' . $currentTop . 'px;">' . $row['playername'];
    echo "<br>";
    echo $row['points']. '</div>';
    $currentTop += 140; // 100px高度 + 20px间距 + 20px内边距，可根据实际调整
}

然后修改CSS，去掉margin-top，保留position:absolute：

.leaders {
    width:265px;
    height:100px;
    background-color: #ee845b;
    margin-left: 900px;
    padding:10px;
    text-align:right;
    position:absolute;
    color:white;
    font-size: 20px;
    border:1px solid black;
    padding-top:10px;
}

不过这种方法的缺点是，元素脱离文档流后会覆盖其他内容，而且需要手动计算偏移量，不如第一种方案稳定。

内容的提问来源于stack exchange，提问作者marina