0
如果某个网站的商品缺货，我正在尝试使图像重叠。下面是一些示例代码：覆盖两个图像：保持定位
<html>
<head>
<style type="text/css">
.box {
display: inline-block;
vertical-align: top;
text-align: center;
min-width: 200px;
max-width: 200px;
min-height: 200px;
max-height: 400px;
margin-bottom: 5px;
margin-right: 5px;
margin-top: 5px;
margin-left: 5px;
}
.prod {
position: absolute;
height: 120px;
width: 200px;
}
.out {
position: relative;
height: 120px;
width: 200px;
z-index: 1;
}
.prodex {
height: 120px;
width: 200px;
}
</style>
</head>
<body>
<?php
for ($i = 1; $i <= 10; $i++) {
echo "<div class='box'>";
echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />";
if ($i == 4 || $i == 7) {
echo "<img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />";
}
echo "<br/>";
echo "lorem ipsum etc etc";
echo "</div>";
if ($i == 5) {
echo "<br/>";
}
}
echo "<br/><br/><br/><br/>";
echo "<div class='box'>";
echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prodex' />";
echo "<br/>";
echo "lorem ipsum etc etc";
?>
</body>
</html>
这里的输出：
（作为一个侧面说明，是否有PHP小提琴我觉得像这样的错误复制/粘贴整个代码）
对于前两行图像，项目4和7已售罄，并且叠加层正常工作。但是，对于其他任何事情都没有正确对齐。对于底部的第三行，我已经使用第三个CSS类正确显示了它。
我不太擅长相对/绝对/等等的定位，这与我肯定有关。我如何得到它，使没有缺货的物品像第三排一样显示，但库存中的物品显示为前两个中正确的物品？
我可以做到以下，但我宁愿不使用第三类（只是前两个）。
if ($i == 4 || $i == 7) {
echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />";
echo "<img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />";
} else {
echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prodex' />";
}
这提供了以下的输出：
问题是，我不希望使用的if/else复杂和第三CSS类。
欢呼声，我就知道它与定位有关。这是我很少使用的，尽管我对它的工作原理有了一个很好的想法。虽然不太确定重叠。谢谢！ – gator 2014-12-02 23:55:59