Пограничный помеха с абсолютным позиционированием

Question

Я пробую анимацию, в которой вы нажимаете кнопку, и она заполняется цветом снизу вверх. Когда вы нажимаете на нее, элемент с абсолютной позицией позиции и поднимается вверх.

Demo (после нажатия на элемент, попытайтесь изменить размеры окна и увидеть проблему)

Перед анимации КСС:

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

После анимации (80px высота коробки):

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

Я знаю, что могу использовать верх: 0px; но мне нужны элементы для выравнивания базовой линии с другими кнопками. Я чист?

Спасибо за помощь!

Answer 1

начать в вашей скрипке вы не зовете должным образом класс svg (вам не хватает точки. Вы написали «svg» insteed из «.svg».

И я не использую границу для достижения вашего эффекта. Если вы ищете полное отзывчивое изображение как ширина 28% может означать, я бы insteed использовать полный абсолютный контейнер, который будет расти (по вертикали) по щелчку:

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

} 

тогда у вас не будет проблем с пролетом (текст AUTO), идя вверх.

Я сделал это fiddle для вас

Answer 2

Если я правильно понял вопрос, вы могли бы использовать позицию: relative; а затем описать, как далеко от нижней части кнопки вы хотите. Пример:

* если вы хотите 80 пикселей, вы можете просто добавить их. Начать + финиш.

это для нижней части (до анимации)

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

это для верхних (для после анимации)

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