DIV Слои, мешающие ссылкам

У меня есть код, как показано ниже, где я думаю, что мое расслоение приводит к тому, что визуализированная ссылка не имеет значения. Некоторые из этого примера я преобразовал в стили из внешних классов CSS, чтобы упростить запись этого в качестве небольшого варианта использования. В настоящее время он тестируется на современных браузерах (последние стабильные FF и Chrome).DIV Слои, мешающие ссылкам

<body> 

<!-- whole container needs to be at z-index of -1 --> 
<div id="container"> 

    <div class="corner" id="backgroundTopLeft"></div> 
    <div class="corner" id="backgroundTopRight"></div> 
    <div class="corner" id="backgroundBottomLeft"></div> 
    <div class="corner" id="backgroundBottomRight"></div> 

    <!-- whole container needs to be at z-index of 1 --> 
    <div id="container2"> 

     <div id="headerSection"><img src="images/jClarity_logo.png" alt="logo" /></div> 

     <div id="navigationSection"> 
      <a class="selected" href="#">Introduction</a><span class="menuDivider">|</span><a href="about.html">About</a> 
     </div> 

    </div> 

</div> 
</body>

И CSS

@charset "utf-8"; 

/* Default margin, padding and font-family */ 
* 
{ 
    font-family: Arial; 
    margin: 0px; 
    padding: 0px; 
} 

/* All images should have no borders by default */ 
img 
{ 
    border: none; 
} 

/* Global styling for links, uses black as the color */ 
a 
{ 
    color: #000000; 
    text-decoration: none; 
} 

a.selected 
{ 
    font-weight: bold; 
} 

a:hover 
{ 
    color:#FF00FF; 
} 

#container 
{ 
    position: relative; 
    z-index: -1; 
    height: 100%; 
} 

.corner 
{ 
    position: absolute; 
    height: 100px; 
    width: 100px; 
    background-color: #172944; 
    z-index: -1; 
} 

#backgroundTopLeft 
{ 
    top: 0px; 
    left: 0px; 
} 

#backgroundTopRight 
{ 
    top: 0px; 
    right: 0px; 
} 

#backgroundBottomLeft 
{ 
    bottom: 0px; 
    left: 0px; 
} 

#backgroundBottomRight 
{ 
    bottom: 0px; 
    right: 0px;  
} 

#container2 
{ 
    position: relative; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    opacity: 0.8; 
    filter:alpha(opacity=80); 
    background-image:url('../images/groovepaper.png'); 
} 

/* The headerSection div, designed to fit in a centered logo */ 
#headerSection 
{ 
    margin-left: auto; 
    margin-right: auto; 
    padding-bottom: 70px; 
    padding-top: 54px;  
    height: 70px; 
    width: 250px; 
} 

/* The navigationSection div, designed to fit in the menu */ 
#navigationSection 
{ 
    padding-bottom: 15px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 600px; 
    text-align: right; 
} 

.menuDivider 
{ 
    color: #666666; 
    padding-left: 5px; 
    padding-right: 5px; 
}

Это все выглядит нормально (много другого типа чисто цвет/размер шрифта стиль налагается), но foobar.html не кликабельны.

Я довольно уверен, что я сделал что-то не так с отводками, но я думал, что использование Z-индексов отсортирует меня ..

источник

2012-07-01 Martijn Verburg

Вы пробовали 'z-index', если' 1' вместо '0'? – HerrSerker

Спасибо за быстрый ответ, Да, я попробовал это, не повезло, я боюсь –

Я думаю, что у вас есть что-то еще на странице, которая находится на верхнем слое. – HerrSerker

http://jsfiddle.net/hPkTu/ работает нормально, если проблема с IE8, использование Z-индекс: 1; Известно, что IE8 не работает с этой проблемой z-index.

UPDATE Вы изменили свой вопрос, вот рабочий jsFiddle вашей обновленной проблемы http://jsfiddle.net/VjTXu/2/. Я изменил z-индекс контейнера на O, -1 делал его ниже тела, и поэтому ваша ссылка не была кликабельна, теперь это так.

источник

2012-07-01 19:01:24

Вы абсолютно правы, я смущен, чтобы сказать, что я не проверял этот сокращенный код. Теперь я отредактировал Q и отправил в реальную сделку :-) –

@MartijnVerburg Обновлен ответ. –

Большое вам спасибо! Полностью не подумал об этом :-) –

DIV Слои, мешающие ссылкам

ответ

Смежные вопросы