Как сверстать кнопку на картинке?

Question

[Sinyak_the_Chosen_One]

Привет всем! Делаю первый проект по макету - вроде все круто, работа идет, но... как всегда - проблема. На одной из частей макета расположены три вот таких блока - и в каждом из них, по идее должна быть кнопка(слева вверху), которая должна нажиматься и выводить, по идее, на другую страницу. Так вот вопрос - как правильно сверстать эти блоки? С флексами вроде бы понятно, выраниваешь, и все. А дальше полный тупняк - как туда, внутрь, запихнуть кнопку, ума не приложу.

Answer 1

[Ankhena]

Флексы+абсолюты или гридами.

Гриды предпочтительнее.
https://codepen.io/AnnaSummer/pen/XWzLwBv

Answer 2

[Kvason]

Блоку с картинкой даете position:relative; а кнопке position:absolute и выравниваете как надо

Comments

[Sinyak_the_Chosen_One]

Не работает. Выстаил как Вы сказали - кнопка просто не реагирует.

.japan_img {
position: relative;
}

.japan_button {
position: absolute;
}

[Kvason]

Sinyak_the_Chosen_One, сделай кодпен, выровняй через top, left, right и т.д.

[Sinyak_the_Chosen_One]

Kvason, Хм... кодпен не понадобился. Нашел ошибку, сделал как Вы сказали. Кнопка села правильно, но...

top: 3435px;
left: 460px;

Это нормально, или все таки костыль и можно лучше? Смущает количество пикселей, которые я выровнял, тк кнопка при абсолюте летает хер знает куда и позиционируется по сему лендингу) Это нормально?

[Kvason]

Sinyak_the_Chosen_One, я так понял ты неправильно эти блоки расположил, у тебя картинка и кнопка должны лежать в одном блоке с position:relative и картинкой растянутой на 100%, а лучше чтоб она была фоном, но это не важно, а кнопка должна лежать внутри этого блока, тогда ты можешь спокойно на несколько пикселей эту кнопку сдвинуть, щас в кодпене накидаю

[Kvason]

Sinyak_the_Chosen_One, https://codepen.io/vankvas/pen/LYOKvpB типа такого

[Sinyak_the_Chosen_One]

Kvason, Спасибо, помогли тупому разобраться. Работает. У меня пока привычка вредная плодить десятки классов в блоках, походу из-за этого был трабл. Но сейчас пашет, дай Вам б-г здороввья и заказчиков адекватных!)

[Kvason]

Sinyak_the_Chosen_One, ахах, спасибо, удачи