Text displays behind span

Question

Maybe there is a better way to do this, but what I am going to do is when you mouseover a link, a background color slides in from the left. But what I am having issues with is the css. I have a link, and in the link there is a span (which contains the background color). There is then text after it like this:

<a href="/info/about"><span></span>About</a>

What is happening, is that the text is showing up behind the span. I have tried moving the text in front of the span, but that doesn't work either. What can I do to fix this?

I have the z-index for each set as well, and it still doesn't work.

Here is the fiddle: http://jsfiddle.net/h5rnj/

Rory O'Kane · Answer 1 · 2013-07-26T15:56:57.503

It works if you just decrease the z-index of .nav-links a span from 1 to -1.

.nav-links a span{
    z-index: -1;
}

jsFiddle

It works because z-index stacks – each use of z-index establishes an independent “stacking context”. The .nav-links a has a z-index: 2, so everything inside it, including your span, is relative to that. The old z-index was 1, which beat the link text's auto (0, in relative terms). Now, with a negative z-index, the span is lower than the link text in the same element.

Note that the behavior is not quite as simple as z-index always adding. Each stacking context establishes a new domain where z-index values only have meaning relative to each other. For example, on this page, the red div.sub-one is on top of both its parent and a div that its parent is above, even though its z-index is -1000.

score 2 · Accepted Answer · answered Jul 26 '13 at 15:23

2

Change .nav-links a span to have z-index: -1. Also, here's the animation in CSS3: http://jsfiddle.net/h5rnj/10/

CSS:

.nav-links a span{
    display: block;
    background-color: #808080;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    z-index: -1;
    transition: all 1s ease-in; 
}
.nav-links a:hover span{
    left: 0;
    transition: all 1s ease-in; 
}

answered Jul 26 '13 at 15:23

Prisoner

27,391
11
73
102

I'd make it faster, that's super slow – Zach Saucier Jul 26 '13 at 15:25
@Zeaklous, it's just an example. Who are we to say how slow/fast he wants it to be? Maybe this website's for sloths. – Prisoner Jul 26 '13 at 15:26
I realize that. I was simply suggesting it so the OP knows the value can be changed – Zach Saucier Jul 26 '13 at 15:27
That works perfect! `transition: all 0.3s linear;` I like the css transitions! I was going to do jquery but this is better! Thanks! – Get Off My Lawn Jul 26 '13 at 15:33
1

@RyanNaddy, you should also include other browser prefixes (example: http://stackoverflow.com/a/14329097/475125) and be aware it won't work in older browsers (compatibility list: http://caniuse.com/css-transitions) – Prisoner Jul 26 '13 at 15:39

score 1 · Answer 3 · edited May 23 '17 at 12:03

1

Change the z-index of span

as

.nav-links a span {
z-index: -1
}

JSFiddle

check this Why does z-index: -1; appear above z-index: 1;?

edited May 23 '17 at 12:03

Community

1
1

answered Jul 26 '13 at 15:21

Praveen

55,303
33
133
164

Text displays behind span

3 Answers3