CODEWITHSUNDEEP
htmlcss
NylePudding
NylePudding

Reputation: 63

Unable to click links when "position: relative" is used?

You can see the issue on the aside here: http://pages.bangor.ac.uk/~eeu41f/

I'm using position: relative on the aside tag in order to change the z-index. However unfortunately this means I can't highlight text or click links on any text placed inside the aside. Removing "position: relative" obviously solves the problem but it means I can't use z-index.

Can you think of any solutions?

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;
}

Upvotes: 2

Views: 2363

Answers (2)

g_uint
g_uint

Reputation: 2041

Maybe a bit of a hack but it should do the trick:

Create a <div> with the content that is now in the aside, but place it outside of your <aside>. Then use relative positioning to move it to the correct position.

Also give your <aside> a min-height otherwise it will collapse if empty.

Now the depth effect is retained and the text should be selectable and the links clickable.

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="#">[email protected]</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>

Upvotes: 0

aleks korovin
aleks korovin

Reputation: 744

Just add to body styles:

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

Upvotes: 5

Related Questions