边框干扰绝对定位

Question

我正在尝试一个动画，您在其中单击按钮，它会从下到上填充颜色。当你点击它时，绝对位置的元素会改变并上升到盒子上。

Demo（单击元素后，尝试调整 window 的大小并查看问题）

在动画之前 css 是：

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

动画后（80px为框高）：

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

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

感谢您的帮助！

Answer 1

如果我理解正确你可以使用 position: relative;然后描述离你想要的按钮底部有多远。例如：

*如果你想要 80 像素，你可以添加它们。开始 + 结束。

这是底部的（动画前）

# boton_auto {position:relative;
    border-bottom: +85px solid #2dbbdc;}

这是顶部（动画后）

# boton_auto {position:relative;
    border-bottom: +5px solid. #2dbbdc;}

Answer 2

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

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

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

}

那么跨度（AUTO 文本）就不会出现问题，到顶部。

我为你做了这个fiddle

Border interfere with absolute positioning