положение: относительный вызывает неприязнь якоря - PullRequest
Новая
       18

положение: относительный вызывает неприязнь якоря

6 голосов
/ 08 марта 2011

Я возился с разрабатываемым веб-сайтом, пытаясь исправить некоторые странные ошибки IE7, так как это внутренний проект, а IE7 - стандартный браузер. Я закончил тем, что добавил «позиция: относительная», чтобы исправить пару специфичных для IE проблем компоновки, но я, кажется, усугубил ситуацию в FF / Chrome (я считаю себя скорее системным программистом, но мои текущие обязанности включают в себя больше сети фокус к сожалению).

Конкретная проблема заключается в том, что элементы "position: относительные" в итоге сделали некоторые из моих ссылок, которые были перемещены вправо, не щелкаемыми. Я создал простую тестовую страницу, которая, я надеюсь, объяснит это лучше, чем я, словами: http://jsfiddle.net/gBchZ/.

Я в конце концов разберусь в этом беспорядке, но я надеялся, что кто-нибудь сможет объяснить причину, по которой мои ссылки скрываются за позицией: относительные элементы.

Ответы [ 3 ]

10 голосов
/ 08 марта 2011

Без наличия ссылки на сайт сложно точно сказать, что не так.Но в любом случае решением может быть использование z-index для родителя a.Например z-index:100.Имейте в виду, что z-index работает только с позиционированными элементами, поэтому вы можете использовать position:relative.

Демо на основе вашего примера: http://jsfiddle.net/gBchZ/3/

3 голосов
/ 08 марта 2011

Это потому, что .content div s закрывают правую рамку (в вашей демонстрации).Если вы добавите margin-right к этим элементам, a станет 'достижимым': 

.content
{
    position: relative;
    margin-right: 20%;
}

Демонстрация JS Fiddle

Вы также можете использовать position: absolute;чтобы элемент a выглядел «выше» в z-index, хотя это становится довольно сложным: 

#rightBox
{
    background-color: green;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 0;
    top: 50%;
    margin: -20px .5em .5em .5em;
    padding: .5em;
}

Демонстрация JS Fiddle

0 голосов
/ 08 марта 2011

@ David правильно в том, что position: relative на элементах .content дает им z-index, означая, что они «на вершине» ссылки, на которую вы перешлиправо.

Я думаю, что лучшее решение - это добавить position: relative; к ссылке, которую вы указали правильно, и присвоить ей z-index выше, чем .content: 

#rightBox
{
    ...
    position: relative;
    z-index: 2;
}

.content
{
    position: relative;
    z-index: 1;
}

См. http://jsfiddle.net/gBchZ/6/

...