html - 位置为 :absolute inside relative box 的重叠段落

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

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

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