CSS绝对背景作为链接：活动位置

Question

我正在创建一个顶部有链接的图片。图像已设置为相对，并且链接为图像底部的绝对值。基本上它是图像顶部的一个链接，具有绝对位置和固定的宽度和高度。在悬停时，链接的背景会改变它的颜色。每当我点击链接时就会出现问题：它在图像的顶部（在Opera和IE上停留在那里）。图像作为示例：

在下图中是带链接的正常图像状态（悬停背景上的透明度变化）。

在下面的图片中，链接的a:active状态为。

它保持绝对元素，但改变它的位置。我尝试过申请a:active这些选项：复制普通和悬停状态下的所有内容position:static;，甚至尝试放置一个margin-top，其大小必须保持在最低点 - 否运气。

以下是它的css代码：

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

（不再需要链接）。

Answer 1

你在custom.css第79和194行上有一个冲突的CSS，它覆盖了绝对定位：

你宣布：

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

和第194行：

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

这两个都导致了这个问题。您希望项目保持position:absolute开启：活动。

Answer 2

这是你的问题：

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

您在以下选择器中覆盖position，但不覆盖top：.kategorijos .vienas a。您应该添加top: initial以进行修复。 我假设position: static设计在这里：

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

这会移动图片下方的链接。

Answer 3

试试这个，我想这会有效：）

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

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