Html 带位置的重叠段落：绝对在相对框内

一旦我尝试将子框放在父框内，子框上的段落就不会出现 工作需要分开。在这种情况下，我如何将每个段落分开

.main\u图像{
位置：相对位置；
高度：300px；
利润率：10px；
最高：1%；
}
.main_图像img{
宽度：100%；
身高：100%；
}
.main_image p{
位置：绝对位置；
顶部：50px；
右：30%；
字号：3em；
字体系列：永久标记；
颜色：#FFFFFF；
}
.空间{
顶部：80px；
}

韩国首尔

艺术画廊

.main\u图像{
位置：相对位置；
高度：300px；
利润率：10px；
最高：1%；
}
.main_图像img{
宽度：100%；
身高：100%；
}
.main_image.desc{
位置：绝对位置；
顶部：50px；
右：30%；
字号：3em；
字体系列：永久标记；
颜色：#000；
}
.空间{
顶部：80px；
}

韩国首尔

艺术画廊

尝试将

标记包装在

中，并将该div分配为

位置：绝对值

：

HTML:

<div class="main_image">
      <img src="images/seoulkoreaart.jpg">
      <div class="overlay">
          <p>Korean Seoul</p>
          <p class="space">Art Gallery</p>
      </div>
</div>

---

为什么不将段落放在绝对定位的div中，并将段落保持为静态/相对？请更清楚地描述您试图实现的目标，或者更好地描述您想要的结果的图像，显示每个div的框以及您希望段落文本执行的操作。因为您同时给出了p

位置：绝对位置和相同的左上方位置。
.main_image .overlay{
        position: absolute;
        top:50px;
        right:30%;
        font-size:3em;
        font-family:PermanentMarker;
        color:#FFFFFF;
    }