0

я новичок в HTML и хочу поставить кнопку на картинку(без нарушений адаптивности), но все что я нашел это position: absolute Вот мой код html

<div class="section2">
    <div class="wedo">
        <div class="wedo__item" >
            <img src="Mobile.png" class="smart">
        </div>
        <div class="wedo__item2">
            <button>Скачать</button>
        </div>
    </div>
</div>

И вот css

.section2{
    margin-top: 4.3rem;

}

.wedo {
    position: relative;
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    overflow: auto;
}
.wedo_item {
    width: 50%
}

@media(max-width: 768px){
   .wedo__item {
    width: 100%;
    } 
}


/*.smart {
    margin-left: 5.4rem;
}*/
@media(max-width: 768px) {


    .smart {
        height: 300px;
        margin-left: 2.4rem;
    }
}

.wedo__item2 {
    height: fit-content;
    position: absolute;
    left: 40px;
    right: 0;
    top: 150px;
    bottom: 0;
    margin: auto;
    width: fit-content;
}
5
  • Под нарушением адаптивности я имею ввиду то, что кнопка "гуляет" по изображению 26 июл 2022 в 10:49
  • Возможный дубликат вопроса: Как разместить кнопки на картинке и текст? 26 июл 2022 в 10:49
  • Этот способ более менее работает, но при переходе из мобильной версии сайта в компьютерную все съезжает, да и мне бы еще понять как работает такой способ 26 июл 2022 в 11:01
  • Можете посмотреть вот тут, если это то, что нужно. Пуф 26 июл 2022 в 11:34
  • Здравствуйте, в методе который вы отправили просто меняют изображение на кнопке, а я ищу другое 26 июл 2022 в 12:07

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.