How to make overlapping links clickable

Question

Lines height in my div is a little smaller than font size by design, so that links are overlapping. First two of them are partly clickable.

<div style="width:25px;line-height:8px;">
    <a href="/link1" style="font-size:10px;z-index:10;">link1</a>
    <a href="/link2" style="font-size:10px;z-index:9;">link2</a>
    <a href="/link3" style="font-size:10px;z-index:8;">link3</a>
</div>

I already tried to set higher z-index to higher links as I showed in my sample, but it doesn't help.

JSFiddle: http://jsfiddle.net/pQ4RV/

Why would you want to do this? What are you trying to accomplish? — WillardSolutions, May 27 '14 at 17:19

score 5 · Accepted Answer · answered May 27 '14 at 17:22

5

In order for z-index to work you need to specify

position: relative;

on the elements you're specifying the index for.

But in general you should fix your line height problems not write a workaround using z-indexing.

answered May 27 '14 at 17:22

Etheryte

24,589
11
71
116

score 1 · Answer 2 · answered May 27 '14 at 17:23

1

Give <a> a position: relative, so z-index will work.

CSS:

a {
    position: relative;
}

http://jsfiddle.net/76dH7/

answered May 27 '14 at 17:23

LcSalazar

16,524
3
37
69

How to make overlapping links clickable

2 Answers2