Html CSS赢得'；我不能呆在原地

我正在制作我的第一个网页，在定位元素时遇到了问题。当我调整浏览器大小时，它们彼此重叠。标题是绝对定位的，但这意味着它与顶部的图像重叠。我用任何其他方法都无法把它安装到位。有人能帮忙吗

我的问题第一次没有得到正确的回答

.wrapper{
保证金：0自动；
最大宽度：1024px；
最小宽度：1024px；
最小高度：760像素；
最大高度：760像素；
右侧填充：15px；
左侧填充：15px；
边框：5px纯红；
}
.标题img{
最小宽度：77%；
最大宽度：77%；
最小高度：200px；
最大高度：200px；
位置：相对位置；
左：23%；
}
#续{
位置：相对位置；
宽度：200px；
高度：200px；
边框：5px纯红；
}
#连续标题{
位置：相对位置；
宽度：200px；
高度：200px；
边框：5px纯红；
}
.左上角{
位置：绝对位置；
顶部：11px；
左：23%；
颜色：青绿色；
字体大小：63px；
最小宽度：100px；
最大宽度：100px；
最小高度：100px；
最大高度：100px；
字体系列：Helvetica；
文本对齐：居中；
}

邓克的吉他课

您尝试过类似的方法吗？如果我错了，请告诉我

这是你的css代码

.wrapper {
    margin: 0 auto;
    max-width: 1024px;
    min-width: 1024px;
    min-height: 760px;
    max-height: 760px;
    padding-right: 15px;
    padding-left: 15px;
    border: 5px solid red;
    }

    .header img {
    min-width: 77%;
    max-width: 77%;
    min-height: 200px;
    max-height: 200px;
    position: relative;
    left: 23%;
    }

    #cont {
    position: absolute;
    z-index:1000;
    width: 200px;
    height: 200px;
    border: 5px solid red;
    }

    #cont .header {
    position: relative;
    width: 200px;
    height: 200px;
    border: 5px solid red;
    }

    .top-left {
    position: absolute;
    top: 11px;
    left: 23%;
    color: teal;
    font-size: 63px;
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    max-height: 100px;
    font-family: Helvetica;
    text-align: center;
}

这里是您的html代码

    <div class="wrapper">
        <div class="header">
            <div id="cont">
            <div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
        </div>
            <img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" />
        </div>
    </div>

邓克的吉他课

希望这对你有帮助。

---

祝你好运。

你想把标题和图片放在哪里？请提供截图或至少是原型，因为其他人不知道它应该如何显示在屏幕上。提供截图你能提供一个它看起来如何以及应该看起来如何的图片吗？

位置：绝对的

有它的位置，但应该谨慎使用，正是因为这个原因。以这种方式定位的任何元素都将从正常文档流中删除。了解如何使用文档的自然流定位元素将对您大有帮助。