叠加两张图片：保持定位

时间：2014-12-02 23:29:20

标签： php html css

如果某个商品的网站缺货，我正试图将图片叠加到另一个图片上。这是一些示例代码：

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

这是输出：

overlay

（作为旁注，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' />";
}

这提供了以下输出：

overlay2

问题是我不想使用if / else复杂和第三个CSS类。

2 个答案:

答案 0 :(得分：1)

绝对位置将相对于位置相对的父容器。

  .box {
      position: relative; /* make relative */
      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 {
      height: 120px;
      width: 200px;
  }
  .out {
      position: absolute; /* make absolute */
      top: 0;
      left: 0;
      height: 120px;
      width: 200px;
      z-index: 1;
  }
  .prodex {
      height: 120px;
      width: 200px;
  }
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
    <br/>lorem ipsum etc etc</div>
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
    <br/>lorem ipsum etc etc</div>
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
    <br/>lorem ipsum etc etc</div>
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
    <br/>lorem ipsum etc etc</div>
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
    <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
    <br/>lorem ipsum etc etc</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prodex' />
    <br/>lorem ipsum etc etc

答案 1 :(得分：1)

如果有一些变化，我认为这就是你要找的东西：

已添加 position:relative至.box，已删除 position:relative来自.prod且已更改 .out，添加position:absolute＆amp; left:0

编辑：由于您不想使用IF个PHP文件，我添加了nth-child 选择器CSS < / strong>，因为你提到第4项和第7项只是售罄。

请参阅以下代码段：

＆＃13;
＆＃13; 
.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;
  position: relative;
}
.prod {
  height: 120px;
  width: 200px;
}
.out {
  position: absolute;
  height: 120px;
  width: 200px;
  left: 0;
  z-index: 1;
  display:none;
}

.box:nth-child(4) .out, .box:nth-child(7) .out{
  display: inline
}
＆＃13; 
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题