Привет всем! Таким образом, изображение выше - это то, что я пытаюсь достичь с помощью моего кода, однако один или другой всегда подталкивают другого либо ниже него, либо над ним вместо того, чтобы просто сидеть друг над другом.
Я читал о z-index и top: 0; но независимо от того, что я пытаюсь, я не могу получить результаты, которые я хочу. Может быть, я использую эффект fade в javascript для текста, но я не уверен. Вот мой код, что бы вы порекомендовали? Спасибо!
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
background-repeat: repeat;
font-size: 12px;
color: #333366;
}
#picOne, #picTwo {
position:relative;
display: none;
float:center;
}
#pics {
}
#my-object {
position: absolute;
z-index: 1;
top: 0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#picOne').delay(1000).fadeIn(2000).delay(2500);
$('#picTwo').delay(2000).fadeIn(1500).delay(2000);
});
</script>
</head>
<body>
<div id="pics" align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="middle"><font size="200" face="Arial" id="picTwo" color="black">SOME TEXT</font></td>
</tr>
<tr><td align="center" valign="middle">
<script type="text/javascript" src="widgets.js"></script>
<script src="three.js" type="text/javascript"></script>
<script src="trail.js" type="text/css"></script>
<div id="my-object">
<canvas></canvas>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>