CODEWITHSUNDEEP
csscss-positionabsolute
Baseckas
Baseckas

Reputation: 136

CSS absolute background as link: active position

I am creating image which has a link on top with. Image has been set as relative, and the link as absolute on the bottom of the image. Basically it is a link on top of the image with absolute position and fixed widh and height. On hover, background of the link changes it's color. The problem occurs whenever I click on the link: it goes top of the image (on Opera and IE it stays there). Images as examples:

In the picture below is a normal state of image with link (on hover background's transparency changes). enter image description here

In this picture below is a state of a:active of the link.
enter image description here

It stays as absolute element, but changes it position. I have tried applying for a:active these options: copy everything from normal and hover states, position:static;, even tried to place a margin-top with a size that would be required to stay in bottom - no luck.

Here is the css code of it:

.image-with-link {width:300px; height:135px; position:relative; float:left; overflow:hidden;}
.image-with-link a {width:280px; height:18px; position:absolute; bottom:20px; left:0; padding:5px 10px; color:#fff; text-align:left; background: rgba(0,0,0,0.3); overflow:hidden;}
.image-with-link a:hover {background: rgba(0,0,0,0.5);}

(link is no longer needed).

Upvotes: 0

Views: 760

Answers (3)

Michael Unterthurner
Michael Unterthurner

Reputation: 941

Try this, I guess this will work :)

a:active, a:focus {
    position: relative;
    top: 1px;
}

.kategorijos .vienas a:active {
    position: static;
}

Upvotes: 0

Saram
Saram

Reputation: 1510

This is your problem:

a:active,
a:focus{
    /* Give clicked links a depressed effect. */
    position:relative;
    top:1px;
}

You overwrite position, but not top in following selector: .kategorijos .vienas a. You should add top: initial for fix. I assume that position: static is by design here:

.kategorijos .vienas a:active {position:static;background: url('../images/arrow.png') 270px 4px  no-repeat rgba(0,0,0,0.5);}

This moves link below image.

Upvotes: 1

robooneus
robooneus

Reputation: 1344

You have conflicting CSS on lines 79 and 194 of custom.css that is overriding the absolute positioning:

You are declaring:

a:active, a:focus {
    position:relative;
    top:1px;
}

and on line 194:

.kategorijos .vienas a:active {
    position:static;
}

Both of these are causing the problem. You want the item to keep position:absolute on :active.

Upvotes: 1

Related Questions