我正在编写一个日历，并试图将包含在 div 中的日历编号保留在同一位置。但是，当我在 div 中为事件添加文本时，文本似乎将数字向上推。从阅读中我收集到这与块元素垂直相互推动有关。我已将数字 div 和事件 div 中的位置设置为相对，因为如果我将其转换为绝对，那么所有元素都会相互打印。而且我尝试了各种其他css标签组合，但均无济于事。
这是一个说明问题和代码的jsfiddle ：
css
table.calendar {
table-layout: fixed;
width: 520px;
}
div.day-number {
background:#999;
z-index:2;
top:0px;
right:1px;
padding:4px;
color:#fff;
font-weight:bold;
width:18px;
text-align:center;
}
td.calendar-day, td.calendar-day-np {
width:70px;
padding:5px 25px 5px 5px;
border-bottom:1px solid #999;
border-right:1px solid #999;
}
div.event {
position:relative;
z-index:3;
top:15px;
text-width: 70px;
}
html
<table class="calendar">
<tr>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thur</td>
<td>Fri</td>
</tr>
<tr>
<td class="calendar-day"><div class="day-number">14</div><p> </p><p> </p></div></td>
<td class="calendar-day"><div class="day-number">15</div><p> </p><p> </p></div></td>
<td class="calendar-day"><div class="day-number">16</div><div class="event">4:00PM<br>Go to gym</div><p> </p><p> </p></td>
<td class="calendar-day"></td>
<td class="calendar-day"><div class="day-number">18</div><p> </p><p> </p></div></td>
</tr></table>
任何人都可以建议解决此问题。提前致谢。