отделение, плавающее по таблице
Я пытаюсь заставить отделение плавать за столом, таким образом, это будет сверху всего текста?
4 ответа
Проверьте абсолютное позиционирование и, возможно, также z-index (хотя, если это ваш единственный контент с абсолютным позиционированием, вы не будете нужно это). Хотя есть и другие способы добиться совпадения элементов, это, вероятно, наиболее актуально для вас.
Очень простой пример:
CSS:
#target {
position: absolute;
left: 50px;
top: 100px;
border: 2px solid black;
background-color: #ddd;
}
HTML:
<p>Something before the table</p>
<div id="target">I'm on top of the table</div>
<table>
<tbody>
<tr>
<td>Text in the table</td>
<td>Text in the table</td>
</tr>
<tr>
<td>Text in the table</td>
<td>Text in the table</td>
</tr>
<tr>
<td>Text in the table</td>
<td>Text in the table</td>
</tr>
<tr>
<td>Text in the table</td>
<td>Text in the table</td>
</tr>
</tbody>
</table>
Я бы обернул таблицу в "позиционированный" div. Я установил div в положение position: relative , чтобы он не прерывал поток остального содержимого документов.
<div style="position: relative">
<table style="width: 500px;">
<tr>
<td>Table Text</td>
</tr>
</table>
<div style="position: absolute; top: 0; left: 0; width: 500px; background: green;">
I am on TOP of the table!
</div>
</div>
<style>
#floatme{
position: absolute;
top: XXpx;
left: XXpx;
}
</style>
Просто измените верхнюю и левую переменные.
Я согласен с TJ - z-индекс - это путь - использование javascript и css/html позволит вам спрятать/показать этот "волшебный плавающий ящик" над таблицей.
.