Question

我已经使用Spring MVC，Hibernate等进行了Web应用程序，但我的问题是css类型。我在网上发现了一个很酷的图片库（http://alpatriott.ru/works/album/album-mod.html）。到目前为止这么好，我已经实现了它，只有图片不会与下面的div重叠。我将展示截图来澄清.. 有谁能告诉我如何解决这个问题？

如果需要任何代码，请告诉我，我会发布

enter image description here

CODE： jsp：

<html>
<head>
    <title>${album.description}</title>
</head>
<body>
<div id="container">
    <div id="content">
        <div class="gallery">
            <c:forEach items="${album.pictures}" var="picture">
                    <a tabindex="1">
                        <img src="<c:url value='/picture/${picture.id}'/>" alt="description" title="${picture.description}" />
                    </a>
            </c:forEach>
            <span class="closed">+</span>
            <span class="closed-layer"></span>
        </div>
    </div>
</div>
</body>
</html>

css：

#container {
    height: 62%;
    width: 100%;
    float: left;
    background-color: #A9E2F3;
    overflow-x: auto;
}

#container #content {
    height: 87%;
    margin: 20px 30px;
    padding: 15px 0 0 5px;
    overflow-y: auto;
    position: relative;
}

img style：

.gallery {
    position: relative;
    z-index: 2;
}

.gallery a{
    display:inline-block;
    width:200px;
    height:141px;
    position:relative;
    border:5px solid #fff;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;


.gallery a img{
    display:block;
    width:100%;
    height:100%;
    -webkit-transition-property:width, height, top, bottom, left, right, z-index;
    -webkit-transition-duration:300ms;
    -moz-transition-property:width, height, top, bottom, left, right, z-index;
    -moz-transition-duration:300ms;
    -o-transition-property:width, height, top, bottom, left, right, z-index;
    -o-transition-duration:300ms;
    transition-property:width, height, top, bottom, left, right, z-index;
    transition-duration:300ms;
    position:relative;
    z-index:2;
    top:0px;
    left:0px;
    cursor:pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}


.gallery a:focus img{
    width:250%;
    height:250%;
    display: block;
    position:absolute;
    box-shadow:0 0 15px 2px #000;
    -moz-box-shadow:0 0 15px 2px #000;
    -webkit-box-shadow:0 0 15px 2px #000;
    -webkit-transition-property:width, height, top, bottom, left, right, z-index;
    -webkit-transition-duration:2s;
    -moz-transition-property:width, height, top, bottom, left, right, z-index;
    -moz-transition-duration:2s;
    -o-transition-property:width, height, top, bottom, left, right, z-index;
    -o-transition-duration:2s;
    transition-property:width, height, top, bottom, left, right, z-index;
    transition-duration:2s;
    cursor:default;
    z-index:25;
}

我在页面上使用装饰器。告诉我这是不够的！

Answer 1

将高z-index（如999或更高）放入图像样式中。这应该有用。

如何让'弹出'的图像与另一个div重叠？

1 个答案: