html - テキストが CSS 画像に重なっている

Question

HTML5 と CSS3 を使用して Web サイトを作成しています。純粋な CSS を使用して画像を作成していますが、2 つの CSS 画像をまとめて、そのうちの 1 つに数行のテキストがあると問題が発生します。

今すぐ要点を説明します - 正方形の画像を作成し、それらを分割しました。以下を使用して、そのうちの1つにテキストを配置しました。

<p></p>

テキストを含む CSS 画像のソースは次のとおりです。

#right {
background-color: #FFFFFF;
height: 900px;
position:absolute;
border-width:1px;
display: block;
border-style:solid;
margin-left: auto;
font-family: 'Ubuntu', sans-serif;
font-size: 85%;
margin-right; auto;
color: #000000;
border-right-color:white;
border-color:grey;border-style:solid;
border-top-left-radius: 5px;
top:300px;
width: 300px;
left:102px;

2 番目の CSS 画像ソースは次のとおりです。

#middle { 
background-color: #FFFFFF;
height: 900px;
position:absolute;
color: #000000;
display: block;
margin-left:auto;
border-right-color:white;
border-width:1px;
text-align:center;
margin-right; auto;
border-left-color:white;
top:300px;
border-top-color:grey;
border-style:solid;
width: 560px;
left: 390px
}

さて、HTML5 ソースに移ります:

    <a id="bottom"></a></div>
<!--Begin page -->

<div id="right">
          <p>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFff</p>
</div>

では、お詫び申し上げます。この質問がばかげていると思われる場合は、説明したすべてをバックアップするために、理解を深めていただくために、問題のイメージを提供しました。