Question

我添加了一些css来实现我的jsp页面中的选项卡（使用spring mvc）。它只能在Chrome中运行，自定义到其他浏览器并不重要

这是我的css：

.w3c {
    min-height: 450px;
    position: relative;
    width: 100%;
}
.w3c > div { display: inline; }
.w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: transparent; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
.w3c > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, #ffffff, #eee); }
.w3c > div:target > a { background: #ffffff; }
.w3c > div > div { background: #ffffff; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }
.w3c > div:not(:target) > div { position: absolute }
.w3c > div:target > div { position: absolute; z-index: -1; }

jsp页面的一部分

   <div style="width: 90%; float: left;">
        <div class="w3c">
            <div id="tab1">
                <a href="#tab1">Список предметів</a>

                <div>
                    <c:if test="${not empty foundData.subjects}">
                    <form>
                        <c:forEach items="${foundData.subjects}" var="subject">
                            <c:url value="/profileSubject.do" var="profileUrl">
                                <c:param name="selectedSubject" value="${subject.idSubject}"/>
                            </c:url>
                            <a name="selected" href="${profileUrl}"/><c:out value="${subject.nameSubject}"/></a> </br>
                        </c:forEach>
                    </form>
                    </c:if>

                    <c:if test="${empty foundData.subjects}">
                        <c:out value="Немає даних про предмети"/>
                    </c:if>

                    <form action="/timetable/profileSubject.do" method="get">
                        <input type="submit" value="Додати"/>
                    </form>
                </div>
            </div>

            <%--Group--%>
            <div id="tab2">
                <a href="#tab2">Список груп</a>

                <div>... and so on

没有样式，所有链接和按钮都能正常工作，但是当我添加css样式时 - 一切都不起作用。

请帮我找到解决这个问题的方法

Answer 1

我解决了这个问题。问题出在z-index上，它取负值。当我更改了z-index：-2到z-index：1和z-index：-1到z-index：2 - 一切似乎都运行良好。

添加标签css时为什么链接在jsp中不起作用？

1 个答案: