Крепление перекрытия вопрос между HTML ссылки и изображения?

Тема в разделе "Верстка", создана пользователем Ahmad, 16 сен 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    У меня есть нижний колонтитулы на моем сайте, в которых есть ссылки с изображениями под ними. Существует перекрытия между двумя div, содержащие эти. Где изображения ссылки перекрываются, ссылки не являются интерактивными.

    Извлечение релевантной кодом и выполнение JSFiddle из него может занять некоторое время, поэтому я отправляю фотографии, и я надеюсь, что кто-то может помочь мне на их основе:

    footer_info div содержащие HTML ссылки:

    [​IMG]

    footer_row_0 div содержащие изображения:

    [​IMG]

    Для моего сценария, следующие HTML ссылки не работают:

    Privacy Policy
    Terms & Conditions
    Site Map
    Affiliates
    Specials
    Wish List
    Newsletter

    Я уже пытался z-index: 10 на footer_info div, но это не решит проблему. И, если я изложу отрицательного значения z-index для footer_row_0 div, она исчезает.

    footer_info div CSS:

    background-color: rgb(255, 255, 255);
    background-image: none;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    clear: both;
    color: rgb(84, 84, 84);
    display: block;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 149px;
    line-height: 18px;
    margin-bottom: -75px;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 20px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 20px;
    width: 980px;
    z-index: auto;

    footer_row_0 div CSS:

    color: rgb(224, 224, 224);
    display: block;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 150px;
    line-height: 18px;
    position: relative;
    width: 980px;
    z-index: 0;

    Can someone tell me how to solve this issue ?
     
  2. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.728
    Симпатии:
    2.105
    ТС не русскоязычный? потому как читал раза три первый пост и так не смог понять. ссылки накрываются футтер ров дивом?

    пробовали footer_info ставить z-index 100 скажем, а footer_row 50?
    figure020.gif
     
    BDSG нравится это.
  3. Nei

    Nei Nosce te ipsum

    Регистр.:
    5 сен 2009
    Сообщения:
    616
    Симпатии:
    488
    возможно для класса footer_info нужно прописать "position:relative;" т.к. без этого z-index не будет работать
     
    Шумадан нравится это.
  4. Wisemind

    Wisemind Писатель

    Регистр.:
    8 июл 2013
    Сообщения:
    1
    Симпатии:
    0
    Подтверждаю. Без относительного позиционирования, слои (z-index) работать не будут!
     
  5. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    в вашем примере z-index не нужен.. достаточно position:relative у родителя и последовательное размещение блоков.. пример: Перейти по ссылке
     
    Шумадан нравится это.
  6. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
    Можно в foter_info добавить фоновое изображение, с помощью background-position расположить его внизу блока и с помощью высоты блока отрегулировать вид
     
  7. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Я не могу сделать, потому что крошечные синие изображения имеют tooltips. Поэтому они не могут быть на заднем плане в виде статического изображения.