Я пытаюсь сделать наложение изображения другим, если товар отсутствует на веб-сайте. Вот некоторые примеры код:Наложение двух изображений: сохранить позиционирование
<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.
Я не слишком хорош в относительном/абсолютном/etc позиционировании, это как-то связано с этим, я уверен. Как я могу получить его таким образом, чтобы предметы, не находящиеся на складе, отображались как третья строка, но элементы на складе отображались как правильные в первых двух?
Я мог бы сделать ниже, но я бы предпочел не использовать третий класс (только первые два).
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' />";
}
Это обеспечивает следующий вывод:
Проблема Я не хочу использовать, если/другой сложный и третий класс CSS.
Ура, я знал, что это было связано с позиционированием. Это то, что я редко использую, хотя у меня есть хорошая идея, как это работает. Тем не менее, не слишком уверен в перекрытии. Благодаря! – gator