В меню UL отображаются ЗАКРЫТИЕ JQuery UI и изображения - PullRequest
Новая
       4

В меню UL отображаются ЗАКРЫТИЕ JQuery UI и изображения

2 голосов
/ 15 ноября 2011

Я создал страницу HTML, которая использует простой CSS (без JavaScript) для навигации по меню.Тем не менее, я использую вкладку jQuery UI для отображения вкладок данных на той же странице.

Когда меню выпадает, оно появляется за вкладками jQuery (на самом деле, меню также отображается позади любых изображений в тексте, над которымименю выпадает.

Мой (barebones) HTML выглядит следующим образом: 

<html>
    <body>
        <div>
            <div id="navigation2">
                <ul id="menu" style="margin-left:5px;">
                <li class="navigable">
                        <a class="menuitem" href="#">Foo</a>
                  <ul class="submenu">
                        <li><a href="">Foo Bar 1</a></li>
                     <li><a href="">Foo Bar 2</a></li>
                        <li><a href="">Foo Bar 3</a></li>
                  </ul>
               </li>
           </ul>
         </div>
      </div>
      <div id ="tdisp">
      <!-- jQuery tab display here ... -->
      </div>      
    </body>
</html>

, а CSS-файл выглядит так: 

#navigation2{

    background-color: #2d2d2d;

    color: #FFFFFF;

    height: 35px;

    list-style-type: none;

    font-size: 15px;

}



#navigation2 ul li {

    list-style-type: none;

    padding: 7px 20px 7px 5px;

    float: left;

    }



#navigation2 a.menuitem, #navigation2 a.undecorated {

    color: #CCCCCC;

    text-decoration: none;

}





#navigation2 a.current{

    color:#FF0000;

}



#navigation2 ul li.navigable:hover {

    cursor: pointer;

    color: #FFFFFF;

    background-color: #535354;

    border-bottom-color: #c00000;

    border-bottom-width: 2px;

    border-bottom-style: solid;

}

Я подозреваю, что это что-тосделать с z-порядка, но я не уверен, и хотел бы услышать от экспертов здесь о том, как решить эту проблему.

[[Редактировать]]

Из ответов, которые я получил до сих пор, выясняется, что виновником является z-index. Однако кто-то может предоставить более подробную информацию о том, как на самом деле это исправить? (Я на самом деле разработчик C ++, так что это незнакомая территория дляя).

  • Добавлять ли я атрибут z-index в КАЖДОЕ правило, включающее навигацию2, или только один? - если требуется только один, какую запись правила в файле CSS добавить?z-index to?

  • Как мнепроверить z-индекс вкладки jQuery, используя (предпочтительно) инструменты разработчика FF Firebug или Chrome?

Ответы [ 4 ]

1 голос
/ 15 ноября 2011

Джейк правильно понял.Вверх по Z-Index.Вы можете проверить Z-индекс на вкладке jquery в инструментах Chrome Dev, чтобы убедиться, что вы выбрали более высокий Z-индекс.Единственная причина, по которой я говорю проверить Chrome Dev Tools (или Firebug), заключается в том, что в диалоговом окне jQuery UI Z-Index равен 1000 при последней проверке.Просто иди с смехотворно большим #

1 голос
/ 15 ноября 2011

Я бы попробовал увеличить атрибут z-index на вашем элементе navigation2 до чего-то большого в качестве теста - попробуйте 1000.

0 голосов
/ 18 сентября 2013

@ Реми - спасибо, твой ответ меня полностью спас.Я бросил это на своей странице: 

<!--[if IE 7]>
<style type="text/css">
    .ui-tabs {
        position: static;
    }
    .ui-tabs .ui-tabs-nav LI {
        position: static;
    }
</style>
<![endif]-->

И это сработало как чам.IE7 будет смертью меня.

0 голосов
/ 19 апреля 2013

Если у вас нет проблем с IE Scroll, просто удалите «position :lative» в jquery.ui.tabs.css или в jquery-ui - *. Css 

.ui-tabs { /*position: relative;*/ padding: .2em; zoom: 1; }

Нет необходимости устанавливать z-индекс.

...