重叠段落与位置：绝对内部相对框

Question

一旦我尝试将子框放在父框内，子框上的段落就不会 工作要分开。在这种情况下，我怎么能分开每个段落？

.main_image {
	position: relative;
	height:300px;
	margin:10px;
	top:1%;
}

.main_image img{
	width:100%;
	height:100%;
}


    	.main_image p{
    	position: absolute;
    	top:50px;
    	right:30%;
    	font-size:3em;
    	font-family:PermanentMarker;
    	color:#FFFFFF;
    }

    .space {
    	top:80px;
    }

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

Answer 1

＆＃13;

＆＃13;

.main_image {
	position: relative;
	height:300px;
	margin:10px;
	top:1%;
}

.main_image img{
	width:100%;
	height:100%;
}


    	.main_image .desc{
    	position: absolute;
    	top:50px;
    	right:30%;
    	font-size:3em;
    	font-family:PermanentMarker;
    	color:#000;
    }

    .space {
    	top:80px;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试将<p>标记包装在<div>中，并将该div指定为position: absolute：

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>

CSS：

.main_image .overlay{
        position: absolute;
        top:50px;
        right:30%;
        font-size:3em;
        font-family:PermanentMarker;
        color:#FFFFFF;
    }

https://jsfiddle.net/qz4vk1su/