文本不想位于 z-Index 下答案

【问题标题】：Text doesn't wat to sit under z-Index文本不想位于 z-Index 下
【发布时间】：2013-12-03 20:15:42
【问题描述】：

我无法解释我的问题，但这里是... 我创建了一个 z-index 图层效果，并希望在下面显示一些单词。这听起来很简单，但是我的文本位于“Z-Index 图层”下方。

如何正确地将我的文本标记为“继承”或位于 Z-Index 之下。

提前感谢您的帮助。

请在下面打码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>2013 Christmas Ecard</title>



 </head>

<body onload="init();" style="background-color:#D4D4D4"><p>

<font face="Arial">From all of us at Canadian Western Trust.<br><br>

<canvas id="canvas" width="711" height="661" style="z-index: 3; position: absolute; background-color:#ffffff"></canvas>


  <!--[if IE]><param name="movie" value="______.SWF"><![endif]-->
  <!-- fallback to Flash: -->

    <object id="top" style="z-index: 2; position: absolute" width="711" height="661" type="application/x-shockwave-flash" value="_____">
        <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
        <param name="movie" value="________.SWF" />
    </object> 



    <img id="under" style="z-index: 1; position: absolute" src="______"> 


<font face="Arial">
    Please view in HTML.<br><br>
   We wishes everyone a wonderful holiday season and a happy new year!<br><br>

    Please click <a href="____" target="_blank" title=" Christmas animation card">here</a> to open the e-card in your web browser.
    <br><img src="{Campaign_Opened Email_Tracking_URL?}">
</font>

    <br>


</body>
</html>

【问题讨论】：

<div position: absolute; top: 699px;> 不是完全有效的 HTML 或 css...在开始调试之前确保您的 HTML 100% 有效。
谢谢。是的，我意识到了，猜猜这是我尝试一切的结果。
创建一个小提琴可能会显示您的问题的工作副本
好主意。会做。谢谢
请看这里的小提琴：jsfiddle.net/dawidspamer/yTYDA

标签： html css z-index

【解决方案1】：

似乎有一些开放的标签在四处飘荡。哇！！这让我很头疼。现在一切正常，并且可以正常工作！

<body onload="init();" style="background-color:#D4D4D4"><p>


<font face="Arial">From all of us .</font><br><br>




            <canvas id="canvas" width="711" height="661" style="z-index: 3; position: absolute; background-color:#ffffff"></canvas>


          <!--[if IE]><param name="movie" value="...."><![endif]-->
          <!-- fallback to Flash: -->

        <object id="top" style="z-index: 2; position: absolute" width="711" height="661" type="application/x-shockwave-flash" value="https://...">
                <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
                <param name="movie" value="https://...." />
        </object> 



        <img style="z-index: 1; position: absolute" src="https://...."> 
 <font style="position: absolute; top: 725px;" face="Arial">
    Please view in HTML.<br><br>
    We wishes everyone a wonderful holiday season and a happy new year!<br><br>

    The greatest gift is our children.....<br><br>

      Please click <a href="https:"" target="_blank" title="Christmas animation card">here</a> to open the e-card in your web browser.
    <br><br><img src="{Campaign_Opened Email_Tracking_URL?}">
    </font>
<br>


</body>

【讨论】：