Why links don't work in jsp when added tabs css?

I have added some css to implement tabs in my jsp page (with using spring mvc). It has to work just in Chrome, it is not important to customise to other browsers

Here is my 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; }

And part of jsp page

   <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

Without styles all links and buttons work properly, but when I add css styles - everything doesn't work.

Please, help me to find solution to this problem

Answers


I solve this issue. Problem was with z-index, it takes the negative value. When I have changed z-index: -2 to z-index: 1 and z-index: -1 to z-index: 2 - all seems to work well.


Need Your Help

Create Directory in SAS using dlcreatdir then disable Option

directory sas options

I'm testing out using a simple piece of code to create directories that don't exist for my monthly SAS analysis so I don't have to manually do the pre-prep so to speak:

Serialize XML file in AS3

xml flash actionscript-3 xml-serialization adobe

How can I serialize XML(meaning convert &lt; to &amp;lt; and > to &amp;gt; etc...) using AS3. is there any build-in functionality or I have to use some regular expression to make global changes?