Блог

Главная - Вопросы по программированию - изображения отображаются поверх текста при изменении размера браузера

изображения отображаются поверх текста при изменении размера браузера

#html #css

#HTML #css

Вопрос:

введите описание изображения здесь

введите описание изображения здесь

Здравствуйте, я все еще новичок в разработке веб-сайтов, и у меня есть небольшая проблема, я бы хотел, чтобы кто-нибудь помог мне с этим, пожалуйста, есть две картинки, одна картинка, на которой облако перекрывается текстами, это когда размер браузера меньше, но другая выглядит нормальнокогда размер браузера максимален, что я хочу знать, есть ли какой-либо способ сделать так, чтобы изображение отображалось под текстом, как на обычных других веб-сайтах

это код css для обоих изображений

 .top-cloud {
    position: absolute;
    right: 50px;
    top: 50px;
}

.bottom-cloud {
    position: absolute;
    bottom: 400px;
    left: 400px;
}

<div class="div1">
    <img class="top-cloud" src="images/cloud.png" alt="">
    <h1>Albsrawy</h1>
    <h2>Discord programmer</h2>
    <img class="bottom-cloud" src="images/cloud.png" alt=""> <br>
    <img src="images/mountain.png" alt="">
</div>

Комментарии:

1. Где находится соответствующий ему HTML-код? Зачем использовать абсолютную позицию в пикселях, которая будет иметь 0 responsivness? что вы пробовали до сих пор?

2. здравствуйте, я тоже добавил html, какой тип позиционирования и какая единица измерения для абсолютного позиционирования, например, если я хочу изменить его положение и сделать его отзывчивым на всех экранах, что вы посоветуете? 🙂

3. если вам нужно выполнить абсолютное позиционирование, работайте с относительными единицами измерения в процентах или vw / vh. С помощью предоставленного кода я не могу воспроизвести проблему, которую вы описываете. Большая часть кода либо отсутствует, либо не связана (например, полная часть изображения, фоновые изображения… Однако самым простым способом «решить» проблему было бы добавить положительный z-индекс к h1 и h2

4. большое спасибо, я сделаю это <3, и, пожалуйста, у меня есть небольшой вопрос, если вы не возражаете, поскольку я новичок в веб-разработке, наиболее распространенным способом позиционирования элементов было бы использование относительного позиционирования, что я должен использовать просто обычно? :O

5. всегда останавливайтесь на том, чего вы пытаетесь достичь. нет ничего особенного плохого в том, чтобы использовать относительное и абсолютное позиционирование. Однако в большинстве случаев вы должны использовать относительные единицы (%, vh, vw) вместо определенных единиц (px, em, rem). В вашем случае вы можете даже отказаться от использования нескольких фоновых изображений…

Ответ №1:

В вашем теге H1 вы можете установить z-индекс выше, чем у облака

     .top-cloud {
    position: absolute;
    right: 50px;
    top: 50px;
}

.bottom-cloud {
    position: absolute;
    bottom: 400px;
    left: 400px;
}

<div class="div1">
    <img class="top-cloud" src="images/cloud.png" alt="">
    <h1 style="z-index: 10;">Albsrawy</h1>
    <h2>Discord programmer</h2>
    <img class="bottom-cloud" src="images/cloud.png" alt=""> <br>
<img src="images/mountain.png" alt="">
</div>