时间戳

首页 > 解决方案 > 更改浏览器大小时图像位于文本之上

html - 更改浏览器大小时图像位于文本之上

问题描述

在此处输入图像描述

在此处输入图像描述

您好，我仍然是设计网站的初学者，我有一个小问题 idk 的解决方案，我会很感激有人帮我解决这个问题，有两张图片，一张图片云重叠在文本上这是浏览器的时候尺寸较小，但是当浏览器尺寸最大化时，另一个看起来很正常，我想知道有什么方法可以让图像像正常的其他网站一样在文本下方

这是两个图像的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>

标签： htmlcss

解决方案

在您的 H1 标签上，您可以将 z-index 设置为高于云的

    .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>

推荐阅读