CSS: как положить изображение поверх стола

Question

У меня есть таблица с рисунками, и я хочу добавить изображение поверх таблицы по краям данных.Однако я понятия не имею, как это сделать, может ли кто-нибудь указать мне правильное направление?

Ниже приведено то, чего я хочу достичь:

НаНа данный момент у меня есть таблица без круглых изображений «стрелка» и «=».

Спасибо

Следуя советам ниже, я реализовал этот код:

<td>
<img src="images/up.png" alt="increase" height="20" width="20" style="position: relative; left: 47px;"/>&euro;<?php echo $cSalePrice; ?>
</td>

Длядать следующий результат:

Как вы можете видеть, изображение стрелки не отцентрировано по блокам, а также текст "€ 65" смещен вниз ...

Есть идеи?

Хорошо, теперь попробуем прокомментированное предложение, которое исправило толчок "€ 65".Но изображение по-прежнему не отцентрировано вертикально относительно рамки:

Answer 1

Сделать таблицу относительной.

Затем добавьте в таблицу четыре изображения, которые расположены абсолютно и расположены в каждом из своих углов.Например:

table{position:relative}
table img.topright{position:absolute;top:0;right:0;}
table img.bottomleft{position:absolute;bottom:0;left:0;}

и т. д.

Answer 2

ваше изображение должно иметь абсолютную позицию, сверху и слева (или справа внизу).

он должен быть в относительном положении.

Итак, что-то вроде:

<td style="position:relative;">&euro;65<img src="..." style="position:absolute; left:30px; top: 3px;"> </td>

Таким образом, вы можете расположить изображение относительно того, в котором оно находится.

И вы должны использовать классы вместо встроенного кода

Answer 3

Одним из решений является размещение <img src="..."> в левой TD, например, и присвоение ему следующего стиля, чтобы сместить его вправо от позиции макета:

position: relative;
left: 16px;

Answer 4

Нечто подобное может работать. Создайте дополнительный столбец и сделайте ширину 0. Я использую div вместо изображений, но это то же самое. Вы можете попробовать это здесь

КСС

table {
    margin: 10px;
}

table td {
    border: 1px solid black;
    padding: 10px;
    width: 100px;
}

table td.thin {
    position: relative;
    width: 0;
    padding: 0;
    border: none;
    text-align: center;
}

table td.thin div {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    top: 50%;
    left: 50%;
    background: red;
    text-align: center;
    line-height: 20px;
    border-radius: 10px;
}

И HTML

<table>
    <tr>
        <td>r1c1</td>
        <td class="thin"><div>×</div></td>
        <td>r1c3</td>
    </tr>
    <tr>
        <td>r2c1</td>
        <td class="thin"><div>×</div></td>
        <td>r2c3</td>
    </tr>
</table>

Это должно обеспечить вертикальное и горизонтальное центрирование и не повлиять на другие ячейки.