Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Andrew Dickens
Andrew Dickens
18,352 Points

a Links Dead with Position:absolute;

a links stop working completely (no link, no hover change and no cursor change) when i add position:absolute to the container above?

Then the strangest thing, the links become active if the browser window is bigger than 1430px? I can't work it out, any ideas would be cool?

so my html

<body>
 <header>
        <img src="img/dwnlds/talisman1.jpg">
        <div class="headline-container">
            <div class="headline">
                <h1>Artist Name</h1> 
            </div> 
            <div class="headline">
                <h2>Carpenter</h2>
            </div>
        </div>        
    </header>
        <a href="">TEST</a>
</body>

my css

@import "normalize.scss";
@import "reset.scss";
@import "bourbon/bourbon";
img {
    width: 100%;
}
a {
    text-decoration: none;
}
header{ 
        img {
            position: relative;
        }   
}

and it's all good, links work until I add position:asolute

.headline-container {
    position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
}

3 Answers

Kallil Belmonte
Kallil Belmonte
35,561 Points

I already had this issue once, you have two ways out.

ONE: Add a z-index: -1 in your .headline-container

.headline-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
}

TWO: Style your link with an absolute or relative position and make sure it has a z-index superior of your .headline-container in this case.

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Andrew,

I think what's probably happening is that because you're absolutely positioning the headline-container within a parent container that doesn't have a position on it you're covering the entire area which is preventing the link from being hovered over. Here's something you can do to troubleshoot. Try adding a border around your .headline-container and seeing where it's actually covering.

What you might want to do too is assign your position:relative; onto your header instead of the image inside of the header. This will make the .headline-container's absolute positioning limited to that header. Make sense?

Andrew Dickens
Andrew Dickens
18,352 Points
Andrew Dickens
Andrew Dickens
18,352 Points

Boom! thanks guys, I see now that the .headline-container was taking up way to much space and covering over the links. Both your ways work and I also tried removing 

bottom: 0;

and that has worked as well, job done cheers