css - 边框干扰绝对定位

Question

我正在尝试一个动画，您在其中单击按钮，它会从下到上填充颜色。单击它时，绝对位置的元素会发生变化并上升到框。

Demo (单击该元素后，尝试调整窗口大小并查看问题)

在动画之前 css 是:

#boton_auto {border-bottom: 5px solid #2dbbdc;}

动画后(80px为框高):

#boton_auto {border-bottom: 80px solid #2dbbdc;}

我知道我可以使用 top:0px;但我需要元素与其他按钮对齐基线。我清楚了吗？

感谢您的帮助!

Answer 1

从你的 fiddle 开始，你没有正确调用 svg 类(你错过了点。你写的是“.svg”而不是“.svg”。

而且我不会使用边框来实现您的效果。如果您正在寻找一个完整的响应图像，因为宽度 28% 可能表明我会使用一个完整的绝对容器，它会在点击时(垂直)增长:

.blue {
    height:4px;
    position:absolute;
    bottom:0px;
    width:100%;
    background-color:#2dbbdc;
    z-index:-1;

}

然后你不会有跨度(AUTO 文本)的问题，到顶部。

我做了这个 fiddle 为你