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 处于 :active 状态。

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