按钮CSS奇怪的结果

Question

我一直在努力为网络应用定位按钮并遇到了一些困难。我创建了this jsfiddle，这证明了问题。

代码脱离了上下文，因此一些规则和类等可能没有意义，但我遇到的问题是相同的。按钮会在点击时移开，我无法在使用position时修复它。我希望按钮在单击时保持在同一位置，以便单击该按钮实际上会将您带到它所引用的链接。

任何想法？

感谢。

Answer 1

您正在规则1px中指定从页面顶部移至.back:active的链接（当您点击某个项目时会发生什么。）

http://jsfiddle.net/3dk48/8/

a.back:active {
    /* This breaks it.
    position: inherit;
    top:1px; */

    color: black;
}

此外，如果您仍希望获得:active效果，则需要具有正确的特异性（目前a.back:link规则会覆盖color :active的{​​{1}}，但如果你正确地更新了你可以解决的特异性。除了LV（f）HA命令中的链接规则定位（LoVe HAte助记符，加上焦点lol）将确保你的伪类正常工作。）

LoVe-f-HAte助记符：

a:link { ... }
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }

...确保正确的状态覆盖正确的其他状态。

Answer 2

从.back样式

中删除以下代码

position: absolute;   // not need
margin-left: 2%;      // not need

然后问题就解决了。

修改

也在这里做出改变..

.back:active {
    /* position: absolute;
       top: 1px; */
    color: black;
}

fiddle：http://jsfiddle.net/3dk48/9/

Answer 3

使用它：

.back{
    top:32px !important;
}

Answer 4

body{
    position:relative;
}