Как наложить кнопку на image?

Question

я пытаюсь наложить кнопку на изображение, способы которые я искал работают через position: absolute Но я так и не смог сделать сайт адаптивным с таким подходом Вот мой код

<div class=“section2”>
    <div class=“item”>
         <img src=“…”>
    <div class=“item2”>
         <button>Скачать</button>

Answer 1

На самом деле подход с position:absolute, на мой взгляд, правильный. У Вас в коде не закрыты теги, прежде всего, плюс нет стилей, с которыми Вы пытались сделать кнопку по центру, поэтому сложно сказать, что сделано неправильно. Вот рабочий вариант:

    .section2 {
        position: relative;
        width: fit-content;
        height: fit-content;
    }
    .item2 {
        height: fit-content;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: fit-content;
    }

<div class="section2">
    <div class="item">
         <img src="...">
     </div>
    <div class="item2">
         <button>Скачать</button>
     </div>
 </div>

БЛОГ НА HUSL

Как наложить кнопку на image?

Ответы (1 шт):