Невозможно переходить по ссылкам при использовании «position: relative»?

Question

Вы можете увидеть проблему сбоку здесь: http://pages.bangor.ac.uk/~ eeu41f /

Я использую position: relative в теге aside, чтобы изменить z-index. Однако, к сожалению, это означает, что я не могу выделить текст или щелкнуть ссылки на любом тексте, помещенном внутри. Удаление "position: relative", очевидно, решает проблему, но это означает, что я не могу использовать z-index.

Вы можете придумать какие-нибудь решения?

aside, .top_aside {
    position: relative;
    z-index: -1;
    float: left;
    padding: 10px;
    margin-left: -310px;
}


aside {
    background: linear-gradient(rgb(0,200,0),rgb(0,175,0));
    width: 230px;
    border-style: solid;
    border-color: rgba(0,100,0,1);
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 80px;
}

html css

1

NylePudding 10 Дек 2014 в 19:20

Answer 1

Просто добавьте к стилям тела:

body {
position: relative;
z-index: 0;
}

5

aleks korovin 10 Дек 2014 в 16:48

Answer 2

Может быть, это немного взлом, но он должен помочь:

Создайте <div> с контентом, который сейчас находится в стороне, но разместите его за пределами вашего <aside>. Затем используйте относительное позиционирование, чтобы переместить его в правильное положение.

Также задайте минимальную высоту <aside>, иначе он рухнет, если будет пустым.

Теперь эффект глубины сохранен, текст должен быть доступен для выбора, а ссылки - интерактивными.

Css:

.pseudo-aside {
width: 230px;
position: relative;
top: 18px;
left: -308px;
}

Html:

<aside>
</aside>
<div class="pseudo-aside">
<p>Hello there, my name's </p>
<hr>
<h1>Llewelyn Gareth Griffiths</h1>
<hr>
<p>I'm currently studying Computer Science at Bangor University. This site is for any odds, ends, games or random things I make in my spare time. Feel free to have a click around or contact me using one of the following methods:</p>
<hr>
<p><a href="#">NylePudding@gmail.com</a></p>
<p><a href="http://www.twitter.com/NylePudding">Twitter - @NylePudding</a></p>
<p><a href="http://steamcommunity.com/id/NylePudding">Steam - NylePudding</a></p>
</div>

0

g_uint 10 Дек 2014 в 16:54

Невозможно переходить по ссылкам при использовании «position: relative»?

2 ответа

Похожие вопросы

Новые вопросы

html