Требуются эксперты CSS - проблемы со стеком Z-Index в дизайне моей страницы

Question

В основном у меня проблемы с Z-Index. Хотя я не очень разбираюсь в CSS, я бы сказал, что я был достаточно хорош, но на самом деле не могу с этим справиться.

Вы увидите по URL ...

http://howcode.com/code/

... что моя проблема в том, что ссылки в возвращенных результатах "Популярные" не кликабельны или что-то в этом роде. Я пришел к выводу, что это связано с тем, что их Z-индекс испорчен. Мне пришлось поиграть и настроить Z-Index, чтобы получить вкладки - Популярные, Лучшие, Особые и т. Д. - чтобы показать над div кодовой строки.

Когда я настроил Z-индекс так, чтобы результаты были определенно на вершине, они действовали как обычно - текст мог быть выбран, рейтинговые изображения зависли и т.д. Все избранные вкладки были помещены ПОД фоновым изображением для возвращаемых результатов.

Если кто-нибудь может опубликовать обходной путь или изменение моего CSS, это будет очень ценно.

Пожалуйста, не забывайте, что это тестовый сайт и дизайн, и любые другие URL, вероятно, не будут работать, я еще не загрузил ни одной конфигурации базы данных или что-то еще!

Прилагаются несколько скриншотов, чтобы уточнить, что я имею в виду:

1. Это то, что я ХОЧУ случиться (не то, что на самом деле в этой ссылке скриншоты не кликабельны, просто чтобы продемонстрировать мою точку зрения): что я хочу http://i39.tinypic.com/20usq36.png

2. Вот что происходит, когда я настраиваю свойства Z-Index (я этого не хочу!): о нет! http://i39.tinypic.com/2z6hwsx.png

Спасибо вам всем!

Answer 1

Вы должны удалить это:

z-index: -1 !important;

Из вашего .codebg класса, что приведет к скриншоту №2 выше. (Обратите внимание, что у детей не может быть более высокий z-индекс, чем у их родителей, поэтому все, что находится внутри .codbg, равно -1, позади страницы). Затем необходимо исправить изображения вкладки :). Проблема не в том, то, что они находятся за фоном, это то, что они прозрачны и выглядят темнее на темном фоне. Вот изображение (может измениться в этом ответе, как только вы обновите его, указывая прямо на него):

альтернативный текст http://howcode.com/images/tabs.png

Они хорошо выглядят здесь из-за белого фона, но если вы откроете их в редакторе, вы увидите, что они прозрачные, просто сделайте три вкладки полностью (или, по крайней мере, больше) непрозрачными, так как это кажется будь тем, что тебе нужно.

Answer 2

Вы также можете вместо этого поместить background-image из code-bg в content и настроить ширину содержимого и радиус границы

Answer 3

не лучшее решение, но оно здесь.

1. внутри div содержимого перемещает вкладки div после codebg, так что

<div id="content">
  <div id="tabs">
  </div>
  <div id="codebg">
  </div>
</div

становится этим

<div id="content">
  <div id="codebg">
  </div>
  <div id="tabs">
  </div>
</div

затем добавьте к # вкладкам

позиция: абсолютная; верх: 232px;

to # content

обивка-топ: 53px;

это быстрое и грязное исправление. в противном случае вам придется переосмыслить весь макет