CSS z-index проблема в таблицах при использовании всплывающих окон CSS - PullRequest
Новая
       4

CSS z-index проблема в таблицах при использовании всплывающих окон CSS

1 голос
/ 14 марта 2012

Меня попросили создать календарь, в котором определенные даты имели всплывающие окна при наведении на них курсора мыши.Я создал календарь и всплывающие окна, но у меня проблемы с некоторыми датами, отображаемыми в верхней части всплывающего окна!

Каждый месяц находится в отдельной таблице, и я поместил каждую таблицу в отдельный div с назначенным z-индексом, поэтому всплывающее окно из каждой таблицы отображается в верхней части таблиц справа,но в той же таблице всплывающее окно идет под любыми другими датами, которым назначено всплывающее окно.

Мой пример можно посмотреть здесь: http://www.cityofpalmdale.org/departments/parks/drytown/index-test.html

Обратите внимание на поведение, когдаВы наведите курсор мыши на 2 сентября: жирные даты 15 и 22 сентября находятся в верхней части моего всплывающего окна.

Я пытался настроить z-index и позиционирование #popup, #popup a и#popup span, всеми возможными способами, но безуспешно.Я нашел несколько возможных решений, но они относятся к ошибкам IE, и у меня такое же поведение в IE8 и FF8, поэтому я почти уверен, что делаю что-то не так, а не из-за проблем с браузером.

Вот мой CSS: 

.calMonth {
    border - left: 1px solid #000;
border-top: 1px solid # 000;
    text - align: center;
    table - layout: fixed;
}

.calMonth td {
    border - bottom: 1px solid #000;
border-right: 1px solid # 000;
}

.calMonthHeader {
    font - weight: bold;
    font - size: 1.2em;
    color: #026181;
background-color: # d6eff7;
}

.calWeekDays {
    font - weight: bold;
    background - color: #bae4f2;
    font - size: .7em;
}

.calStatusClosed {
    background - color: #CCC;
}

.calStatusOpenReg {
    background - color: #feda91;
}

.calStatusOpenLate {
    background - color: #C6F;
}

.calStatusOpenEarly {
    background - color: #764601;
}

.calStatusSundown {
background-color: # c21802;
}

.calStatusSpecial {
    background - color: #ff9000;
}

#popup {
    color: #000;
}

# popup a,
    #popup a: visited {
        position: relative;
        display: block;
        text - decoration: none;
        font - size: 1em;
        font - weight: bold;
        color: #000;
z-index: 0;
}

# popup a span {
            display: none;
        }

        #popup a: hover {
            /*background-color: #e9e9e2;*/
        }

        /* the IE correction rule */#popup a: hover {
            text - indent: 0; /* added the default value */
        }

        #popup a: hover span {
            display: block;
            position: absolute;
            top: 15px;
            left: 30px;
            width: 250px;
            margin: 0px;
            padding: 10px;
            color: #000;
font-weight: normal;
background: # fff;
            text - align: left;
            border: 4px solid #7ecce7;
z-index: 100;
}

А вот мой код для календаря на сентябрь: 

<div style="position:relative; z-index:11;">
    <table width="170" border="0" cellspacing="0" cellpadding="3" class="calMonth">
        <tr>
            <td colspan="7" class="calMonthHeader">
                <strong>SEPTEMBER 2012</strong>
            </td>
        </tr>
        <tr class="calWeekDays">
            <td>S</td>
            <td>M</td>
            <td>T</td>
            <td>W</td>
            <td>T</td>
            <td>F</td>
            <td>S</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">1<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
        </tr>
        <tr>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">2<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">3<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
            <td class="calStatusClosed">4</td>
            <td class="calStatusClosed">5</td>
            <td class="calStatusClosed">6</td>
            <td class="calStatusClosed">7</td>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">8<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
        </tr>
        <tr>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">9<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
            <td class="calStatusClosed">10</td>
            <td class="calStatusClosed">11</td>
            <td class="calStatusClosed">12</td>
            <td class="calStatusClosed">13</td>
            <td class="calStatusClosed">14</td>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">15<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
        </tr>
        <tr>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">16<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
            <td class="calStatusClosed">17</td>
            <td class="calStatusClosed">18</td>
            <td class="calStatusClosed">19</td>
            <td class="calStatusClosed">20</td>
            <td class="calStatusClosed">21</td>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">22<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
        </tr>
        <tr>
            <td class="calStatusSpecial" id="popup">
                <a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
                onfocus="this.blur()">23<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
            </td>
            <td class="calStatusClosed">24</td>
            <td class="calStatusClosed">25</td>
            <td class="calStatusClosed">26</td>
            <td class="calStatusClosed">27</td>
            <td class="calStatusClosed">28</td>
            <td class="calStatusClosed">29</td>
        </tr>
        <tr>
            <td class="calStatusClosed">30</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>

Ответы [ 2 ]

1 голос
/ 14 марта 2012

Когда появится всплывающее окно, добавьте класс к активному TD, чтобы установить этот z-индекс даже выше, чем другие.

Либо это, либо вы можете сделать: 

#popup {
    z-index:0;
    position:relative; /* Needed for the z-index to apply */
}
#popup:hover { z-index:1; }

Вы действительно не должны использовать один и тот же идентификатор для всех этих. Недопустимый HTML для дублирования идентификаторов на одной странице.

0 голосов
/ 14 марта 2012

У вас есть значение z-index для всплывающих ссылок, которое выбирается без видимой причины.Просто удалите его, и он отлично работает.

Этот блок находится в шапке вашей страницы

CSS 

#popup a, #popup a:visited {
    position: relative;
    display: block;
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    color: #000;
    /* z-index: 0;  remove this */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...