我有以下代码。
我希望发生的事情是在检查项目时，在页面顶部创建一个新的div。
新div包含的图像集大于其他图像。
我的ccs代码：
a>div { display: none; }
a:hover>div { display: block; }
img {
margin: 10px 5px;
position:absolute;
}
从js动态创建代码：
<div style="height:20px;z-index: 2"><img src="' + itemimg + '.jpg" /></div>
将div元素与其他图像一起使用。
<div style="width:960px;z-index: 1">
我已经尝试过了：
将img css position属性从absolute更改为relative
将第二个div上的z-index设置为-1
我正在尝试使包含图像的动态创建的div保持在所有其他图像的前面。
尝试JSfiddle：
测试链接
http://thenerdservice.com/dining/index.php
完整代码：
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script>
function reply_click(element)
{
itemname = element.getAttribute("title");
itemimg = element.getAttribute("alt");
new_training();
}
// function to add set of elements
var tr = 0;
function new_training() {
document.getElementById("training").style="";
tr++;
var newDiv = $('#training div:first').clone();
newDiv.attr('id', tr);
var delLink = '<input type="hidden" name="itemimg[]" value="' + itemimg + '"><input type="hidden" name="item[]" value="' + itemname + '"> ' + itemname + '<select name=priority[]> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deltr(' + tr + ')" > Delete ' + itemname + ' <div style="height:20px;z-index: 5"><img src="' + itemimg + '.jpg" /></div> </a>';
newDiv.find('tr:first th').text('Item ' + tr);
newDiv.append(delLink);
$('#training').append(newDiv);
newDiv.find('input:text').val('');
}
// function to delete the newly added set of elements
function deltr(eleId) {
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('training');
parentEle.removeChild(ele);
}
</script>
<style>
a>div { display: none; }
a:hover>div { display: block; }
img {
margin: 10px 5px;
z-index: 1;
}
.btn {
display: inline-block;
*display: inline;
padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #49afcd;
*background-color: #2f96b4;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
</style>
</head>
<body>
<div>
Welcome <?php echo $username; ?>
<br>Please select any items below to add to your wish list.
<br>Also be sure to set your priority on each 1 = I really want it, 2 = I would like it, 3 = If its still left around ill take it.
</div>
<form name="myForm" method="post" action="addtraining.php" onsubmit="return(validate());">
<fieldset>
<legend>Dining Room</legend>
<div id="training">
<div id="tr">
</div>
</div>
<input type="submit" value="Save and Continue" class="btn btn-info">
</fieldset>
</form>
<div style="width:960px;z-index:1">
<a href="javascript:void(0);" id="img1" alt="DSC00501" title="Antique Iron " onClick="reply_click(this)" style="outline:none;" target="_self"><img src="DSC00501.jpg" width="200"></a>
<a href="javascript:void(0);" id="img3" alt="DSC00541" title="Butter Dish 1 " onClick="reply_click(this)" style="outline:none;" target="_self"><img src="DSC00541.jpg" width="200"></a>
<a href="javascript:void(0);" id="img4" alt="DSC00546" title="Flower Arranger and Silver Bow " onClick="reply_click(this)" style="outline:none;" target="_self"><img src="DSC00546.jpg" width="200"></a>
<div>
<img src="DSC00779.jpg" width="500"><br>
<a class="btn btn-info" href="javascript:void(0);" id="imgc3" alt="DSC00779" title="Candels" onClick="reply_click(this)" style="outline:none;" target="_self">Candels</a>
<a class="btn btn-info" href="javascript:void(0);" id="imgc3" alt="DSC00779" title="Left Plate" onClick="reply_click(this)" style="outline:none;" target="_self">Left Plate</a>
<a class="btn btn-info" href="javascript:void(0);" id="imgc3" alt="DSC00779" title="Right Plate" onClick="reply_click(this)" style="outline:none;" target="_self">Right Plate</a>
<a class="btn btn-info" href="javascript:void(0);" id="imgc3" alt="DSC00779" title="Tea Pot" onClick="reply_click(this)" style="outline:none;" target="_self">Tea Pot</a><br>
<a class="btn btn-info" href="javascript:void(0);" id="imgc3" alt="DSC00779" title="Left Mug" onClick="reply_click(this)" style="outline:none;" target="_self">Left Mug</a>
<a class="btn btn-info" href="javascript:void(0);" id="imgc3" alt="DSC00779" title="Right Mug" onClick="reply_click(this)" style="outline:none;" target="_self">Right Mug</a>
<a class="btn btn-info" href="javascript:void(0);" id="imgc3" alt="DSC00779" title="Bell" onClick="reply_click(this)" style="outline:none;" target="_self">Bell</a>
<a class="btn btn-info" href="javascript:void(0);" id="imgc3" alt="DSC00779" title="Salt and Pepper Shaker" onClick="reply_click(this)" style="outline:none;" target="_self">Salt and Pepper Shaker</a><br>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
使图像div位置：绝对而不是其中的图像：
a>div {
position:absolute;
margin: 10px 5px;
display: none;
}
a:hover>div {
display: block;
}
将其设为绝对会使其脱离页面内容的流程，因此它可以超越其他所有内容。