重疊段落與位置：絕對內相對框

有一次我嘗試過子框在父框內，子框上的段落不是工作分開。在這種情況下，我怎麼能分開每一段？重疊段落與位置：絕對內相對框

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

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

 

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

 
    .space { 
 
    \t top:80px; 
 
    }

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

enter image description here

來源

2016-01-11 Hesung Yoon

你爲什麼不把段落絕對定位的div內，並保持段落靜態/相對？ – caulitomaz

請提供一個更清晰的描述，說明您想要達到的效果，或者更好地描述您想要的結果圖像，顯示每個div的框以及您希望段落文本的內容。 –

因爲你給出了p'position：absolute'並給出了相同的左邊和上邊的位置。 – ketan

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

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

 

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

 
    .space { 
 
    \t top:80px; 
 
    }

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

來源

2016-01-11 11:37:02

嘗試在<div>包裹<p>標籤並分配股利作爲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/

來源

2016-01-11 11:38:28

重疊段落與位置：絕對內相對框

回答

相關問題