边界干扰绝对定位

Question

我正在尝试动画，您可以在其中单击按钮，从底部到顶部填充颜色。单击它时，位置绝对的元素会更改并向上移动。

Demo（点击元素后，尝试调整窗口大小并查看问题）

在动画之前，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

从你的小提琴开始，你没有正确地调用svg类（你错过了点。你写了＃34; svg＆＃34; insved of＆＃34; .svg＆＃34;。

我并没有使用边框来实现你的效果。如果您正在寻找一个完整的响应式图像，因为28％的宽度可能表示我将使用一个完整的绝对容器，该容器将在点击时生长（垂直）：

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

}

然后你不会遇到跨度问题（自动文本），转到顶部。

我已经为你做了 fiddle