稼働環境

[EC-CUBE]　2.11.5
[OS]　Linux
[PHP]　PHP 5.1.6
[データベース]　MySQL 5.0.95
[WEBサーバ]　Apache
[ブラウザ]　Firefox 11.0　Google Chrome　18.0.1025.162　IE8

お世話になります。
スマートフォンの商品一覧ページで
一定以上の商品数になると最下部に
「もっと見る」というボタンが表示されますが、
ボタンをクリックすると初期画面と同様に
「SOLD OUT」の画像を商品画像の上に重ねたいです。

以下のような記述では、divやpタグで分けても
商品画像にSOLD OUTの画像が覆いかぶさってしまいます。

何か他の方法をご存知の方がいらっしゃいましたら
ご教授よろしくお願いいたします。
（下記「SOLD OUTをセット」と「商品写真をセット」の部分です）


----「もっと見る」ボタンを押下したときのJavascriptの記述----

function getProducts(limit) {
$.mobile.showPageLoadingMsg();
var i = limit;
//送信データを準備
var postData = {};
$('#form1').find(':input').each(function(){
postData[$(this).attr('name')] = $(this).val();
});
postData["mode"] = "json";
postData["pageno"] = pageNo;

$.ajax({
type: "POST",
data: postData,
cache: false,
dataType: "json",
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(textStatus);
$.mobile.hidePageLoadingMsg();
},
success: function(result){

var productStatus = result.productStatus;
for (var j = 0; j < i; j++) {
if (result[j] != null) {
var product = result[j];
var productHtml = "";
var maxCnt = $(".list_area").length - 1;
var productEl = $(".list_area").get(maxCnt);
productEl = $(productEl).clone(true).insertAfter(productEl);
maxCnt++;

var stock_max = "<!--{$arrProduct.stock_max[maxCnt]}-->";
var stock_unlimited_max = "<!--{$arrProduct.stock_unlimited_max[maxCnt]}-->";

if (stock_max < 1 && stock_unlimited_max != 1){

} else {

//SOLD OUTをセット
$($(".list_area .soldout img").get(maxCnt)).attr({
src: "<!--{$TPL_URLPATH}-->img/picture/sold_out.png",
alt: "Sold out",
class: "img_over"
});
}

//商品写真をセット
$($(".list_area .listphoto img").get(maxCnt)).attr({
src: "<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=" + product.main_list_image + '&width=80&height=80',
alt: product.name
});

// 商品ステータスをセット
var statusAreaEl = $($(".list_area div.statusArea").get(maxCnt));

// 商品ステータスの削除
statusAreaEl.empty();

if (productStatus[product.product_id] != null) {
var statusEl = '<ul class="status_icon">';
var statusCnt = productStatus[product.product_id].length;
for (var k = 0; k < statusCnt; k++) {
var status = productStatus[product.product_id][k];
var statusImgEl = '<li class="product_status'+ status.status_cd + '">' + status.status_name + '</li>' + "\n";
statusEl += statusImgEl;
}
statusEl += "</ul>";
statusAreaEl.append(statusEl);
}

//商品名をセット
$($(".list_area a.productName").get(maxCnt)).text(product.name);
$($(".list_area a.productName").get(maxCnt)).attr("href", url + product.product_id);

//販売価格をセット
var price = $($(".list_area span.price").get(maxCnt));
//販売価格をクリア
price.empty();
var priceVale = "";
//販売価格が範囲か判定
if (product.price02_min == product.price02_max) {
priceVale = product.price02_min_tax_format + '円';
} else {
priceVale = product.price02_min_tax_format + '〜' + product.price02_max_tax_format + '円';
}
price.append(priceVale);

//コメントをセット
$($(".list_area .listcomment").get(maxCnt)).text(product.main_list_comment);

}
}
pageNo++;

//すべての商品を表示したか判定
if (parseInt($("#productscount").text()) <= $(".list_area").length) {
$("#btn_more_product").hide();
}
$.mobile.hidePageLoadingMsg();
}
});




img_overのCSSの内容

div.list_area .img_over{
position: absolute;
top : 30px;
left: 16px;
filter: alpha(opacity=70);-moz-opacity:0.7;
-moz-opacity: 0.70;
opacity: 0.70;
width: 50px;
z-index: 100;
}