Php 覆盖两个图像：保持定位_Php_Html_Css

Php 覆盖两个图像：保持定位

php html css

Php 覆盖两个图像：保持定位,php,html,css,Php,Html,Css,我试图使一个图像覆盖另一个，如果一个项目是缺货的网站。下面是一些示例代码： <html> <head> <style type="text/css"> .box { display: inline-block; vertical-align: top; text-align: center;

我试图使一个图像覆盖另一个，如果一个项目是缺货的网站。下面是一些示例代码：

<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>


.盒子{
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
最小宽度：200px；
最大宽度：200px；
最小高度：200px；
最大高度：400px；
边缘底部：5px；
右边距：5px；
边缘顶部：5px；
左边距：5px；
}
普罗德先生{
位置：绝对位置；
高度：120px；
宽度：200px；
}
.出去{
位置：相对位置；
高度：120px；
宽度：200px；
z指数：1；
}
prodex先生{
高度：120px；
宽度：200px；
}
绝对位置将相对于具有相对位置的父容器

.box{
位置：相对；/*使相对*/
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
最小宽度：200px；
最大宽度：200px；
最小高度：200px；
最大高度：400px；
边缘底部：5px；
右边距：5px；
边缘顶部：5px；
左边距：5px；
}
普罗德先生{
高度：120px；
宽度：200px；
}
.出去{
位置：绝对；/*使绝对*/
排名：0；
左：0；
高度：120px；
宽度：200px；
z指数：1；
}
prodex先生{
高度：120px；
宽度：200px；
}


lorem ipsum等

lorem ipsum等

lorem ipsum等

lorem ipsum等

lorem ipsum等











lorem ipsum等
稍作改动，我想这就是您想要的：
添加了位置：相对到.box
，删除了位置：相对从.prod
和更改了.out
，添加了位置：绝对和左：0

编辑：由于您不想使用IF
您的PHP
文件，我添加了一个第n个子项选择器CSS，因为您提到的第4项和第7项只会售罄
请参阅下面的代码片段：

.box{
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
最小宽度：200px；
最大宽度：200px；
最小高度：200px；
最大高度：400px；
边缘底部：5px；
右边距：5px；
边缘顶部：5px；
左边距：5px；
位置：相对位置；
}
普罗德先生{
高度：120px；
宽度：200px；
}
.出去{
位置：绝对位置；
高度：120px；
宽度：200px；
左：0；
z指数：1；
显示：无；
}
.box:n个孩子（4）.out..box:n个孩子（7）.out{
显示：内联
}


lorem ipsum等

lorem ipsum等

lorem ipsum等

lorem ipsum等

lorem ipsum等

lorem ipsum等

lorem ipsum等

lorem ipsum等

lorem ipsum等

lorem ipsum等干杯，我知道这与定位有关。这是我很少使用的东西，尽管我很清楚它是如何工作的。不过，我不太确定是否有重叠。谢谢
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' />";
}