[SOLVED] Promo Tag over images CSS

Code: Select all

<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div class="box-product">
      <?php foreach ($products as $product) { ?>
      <div itemscope itemtype="http://schema.org/Product">
        
		<?php if ($product['special']) { ?>
			<div id="over"><img itemprop="image" src="../image/data/ruban_promo.png" alt="Promo" /></div>
		<?php } ?>
		
		<?php if ($product['thumb']) { ?>
			<div class="image"><a href="<?php echo $product['href']; ?>"><img itemprop="image" src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
		<?php } ?>
		
        <div class="name"><a href="<?php echo $product['href']; ?>"><span itemprop="name"><?php echo $product['name']; ?></span></a></div>
        <?php if ($product['price']) { ?>
        <div class="price">
          <?php if (!$product['special']) { ?>
          <span itemprop="price"><?php echo $product['price']; ?></span>
          <?php } else { ?>
          <span class="price-old"><?php echo $product['price']; ?></span><br /><span itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="price-new"><span itemprop="price"><?php echo $product['special']; ?></span></span>
          <?php } ?>
        </div>
        <?php } ?>
      </div>
      <?php } ?>
    </div>
  </div>
</div>

Code: Select all

.over {
 float: left;
 display: block;
 position: absolute;
 z-index: 1;
 top: -5px;
 left: -5px;
}
.box-product > div {
 position: relative;
}