我使用CSS3和JQuery组合了一个简单的Photo堆栈。它工作得很好，但有一个主要问题。该网站需要显示多个堆栈，由于堆栈被用于在网站上显示“照片库”，因此显示不可预测的数量，显然，更多的库，堆栈越多。
没有堆栈这很简单，只需回显一个标签，从DB中检索src。使用堆栈时这仍然很简单，因为唯一的区别是CSS和JQuery的一小部分。
现在针对这个问题，我使用绝对定位来允许堆栈中的三个图像堆叠。这很好，但现在当堆栈被回显时，它正在堆叠堆栈，Urgh！所以我最终得到的只是一堆巨大的图像而不是三张图像上的单个堆栈。
这是代码。
<html>
<head>
<style type="text/css">
#content {
margin: 0 auto;
width: 1024px;
}
#viewAlbumTitle {
font-size: 20px;
}
#grid {
line-height: 0;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-moz-column-count: 4;
-moz-column-gap: 10px;
column-count: 4;
column-gap: 10px;
}
#grid img {
width: 100% !important;
height: auto !important;
margin-bottom: 10px;
padding: 5px;
cursor: pointer;
}
@media (max-width: 480px) {
#grid {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media (max-width: 320px) {
#grid {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
.pv-div {
padding: 0 0 4px 0;
}
.pv-link {
font-size: 15px;
color: #000;
text-decoration: none;
}
.pv-link:hover {
text-decoration: underline;
}
.thumb-over:hover {
}
/* image stsck */
.image_stack {
position: absolute;
}
.image_stack img {
position: absolute;
border: 4px solid #FFF;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
z-index: 9999;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.image_stack #photo1 {
top: 8px;
left: 108px;
}
.image_stack #photo2 {
top: 6px;
left: 104px;
}
.image_stack #photo3 {
top: 4px;
left: 100px;
right: 100px;
}
.image_stack .rotate1 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
}
.image_stack .rotate2 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.image_stack .rotate3 {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
cursor: pointer;
}
.stack_wrap {
margin-left: -100px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".image_stack").delegate('img', 'mouseenter', function () {
if ($(this).hasClass('stackphotos')) {//
var $parent = $(this).parent();
$parent.find('img#photo1').addClass('rotate1');
$parent.find('img#photo2').addClass('rotate2');
$parent.find('img#photo3').addClass('rotate3');
$parent.find('img#photo1').css("left", "150px");
$parent.find('img#photo3').css("left", "50px");
}
})
.delegate('img', 'mouseleave', function () {
$('img#photo1').removeClass('rotate1');
$('img#photo2').removeClass('rotate2');
$('img#photo3').removeClass('rotate3');
$('img#photo1').css("left", "");
$('img#photo3').css("left", "");
});
;
});
</script>
</head>
<body>
<!-- header -->
{include file="header.tpl"}
<!-- header end -->
<div id="content">
<div style="margin:42px 0 0 -15px;">
<div style="float:left; width:192px; padding:30px 24px 0 0;">
<div>
<span style="font-size:20px;">Username's photos</span>
<div style="padding:10px 0 10px 0;"><img src="img/avatar.png" width="192"/></div>
<div class="pv-div"><a class="pv-link" href="">Edit photo's</a></div>
<div class="pv-div"><a class="pv-link" href="">Edit album</a></div>
<div class="pv-div"><a class="pv-link" href="">Delete</a></div>
</div>
</div>
<div style="float:left; border-left:1px solid #ebebeb; width:795px; min-height:400px; padding:32px 0 0 24px;">
<!--<span>You currently have no pictures, why not upload some now?</span>-->
<div>
<span id="viewAlbumTitle">Username's photo albums</span>
<div style="float:right"><a href="" class="main-button" onClick=('popUpload') style="margin:0;">upload
new pics</a></div>
</div>
<div style="margin:20px 0 0 0"></div>
<div>
<div style="margin:10px 0 0 0"></div>
<div id="grid">
<div class="stack_wrap" style="float:left;">
<div class="image_stack" style="postion:relative;">
<img id="photo1" class="stackphotos" src="img/avatar.png">
<img id="photo2" class="stackphotos" src="img/avatar.png">
<img id="photo3" class="stackphotos" src="img/avatar.png">
</div>
<div class="image_stack" style="postion:relative;">
<img id="photo1" class="stackphotos" src="img/avatar.png">
<img id="photo2" class="stackphotos" src="img/avatar.png">
<img id="photo3" class="stackphotos" src="img/avatar.png">
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%; padding:10px 0 20px 0;">
</div>
</body>
</html>
如果有人能帮助我，我们将非常感激。
提前致谢。
杰米
答案 0 :(得分：0)
设置第二个堆栈的顶部位置。
<div class="image_stack" style="postion:relative;top:200px">
答案 1 :(得分：0)
你不会想要位置：容器的绝对位置。
.image_stack {
position:absolute; // this is wrong
}
对于position：absolute的每个image_stack，每个堆栈将继续堆叠在彼此之上。这是因为position：absolute适用于其父容器，其默认的0 0轴开始。
以下是您应该阅读的CSS：
.image_stack {
position:relative;
}
.stackphotos{
position:absolute;
}
答案 2 :(得分：0)
将每个堆叠的三个图像放在它自己的容器元素中：
<div class="grid">
<div class="stack">
<img src="img1" />
<img src="img2" />
<img src="img3" />
</div>
</div>
将堆栈设置为向左浮动：
.stack {
float: left;
}
将堆栈内的图像设置为绝对定位： .stack img { 位置：绝对; 左：0; 顶部：0; }
如果您需要能够看到堆栈中有多个图像，请使用jQuery来偏移每个图像：
$(document).ready(function() {
$(".stack img").each(function(i, element) {
var sibling = element.previousSibling;
var top = 0;
var left = 0;
if (sibling) {
top = $(sibling).position().top;
left = $(sibling).position().left;
}
top += 5;
left += 5;
$(element).css("left", left);
$(element).css("top", top);
});
});
答案 3 :(得分：0)
我已经测试了代码并在position:relative课程上设置了image_stack。
注意：别忘了添加!important
.image_stack{position:relative !important}
您也可以设置z-index