如何用CSS将图片置于表格右上角且保持div原有顺序？

能否用CSS把图片放在表格的右上角？而且必须保持当前的div顺序（接下来要实现鼠标悬停表格时显示图片的效果，如果把图片放在表格前面就没法实现这个需求）。

初始代码 #

CSS #

table {
  width: 100%
}

table,
th,
td {
  border: 1px solid;
}

.div-img {
  z-index: 10;
  top: 0px;
  height: 0px;
}

HTML #

<div>Some text</div>
<div>Some more text</div>
<div>
  <table>
    <thead>
      <th>Column 1 </th>
      <th>Column 2 </th>
      <th>Column 3 </th>

    </thead>
    <tr>
      <td>Col_1_1</td>
      <td>Col_1_2</td>
      <td>Col_1_3</td>
    </tr>
    <tr>
      <td>Col_2_1</td>
      <td>Col_2_2</td>
      <td>Col_2_3</td>
    </tr>
    <tr>
      <td>Col_3_1</td>
      <td>Col_3_2</td>
      <td>Col_3_3</td>
    </tr>
  </table>

  <div class="div-img">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA90RVh0VGl0bGUAU2hvdztFeWU7SeMHJQAAAf1JREFUeF7tVjFrwkAYNf4JB2c3J+nf6OaYxdU/UVrsZAfByVGxQ8cgYhGSsXRoRHTIWi0VpJHSSrGg9Ou9cgeHueTSZCiFfPAg+L33vhdzuVyOiP4U/ytAFiAL0Gw2TxguGWyGZ4ZPgF/b6HFOToFEASDMM5gMcwaKiTnX5NMEgKjM4ArjXq9HjuPQYrGg7XZL+/0ewDV+Qw8cOQi05SQBIKgz7GDU7/dpOp1S3AIXGmi5Rz1uAAw2GFAEjEYjkuvlbUfW/SOdXT+QeeVQVEErfLinESdAS4g8zyO5vKdXatxM6PTiVoA0BQ85RCsqAIbXBHm1WgXuXAyXEaPgJYeoqQJgeJHhA6TZbHbsgb8dAwOIW/CEN59RVAXogDAYDFR6PPM0AQB4ixAdVYANmr7vq7RYcGkDwFsE2KgC+Giu12tNAD3AVRS8RQBfFaCNpmVZmkegB7iKgrcI0FYFKDC8gzAejyMWoR7gHhc84c1nFMJewyrDF4jL5VLzGqoBDrhywQue3Luq24ganIwtVbMRBYaDE9iWhR+8NTthMMRwOKTD4RC2FQO4xm/ynUMDbcRw/cfIFGui2+2S67oUs8CFRn7mZtLPcYnhDkYiiG3bYZ9j9OTBxLWltAcSgy/OCUxjYsI1RvIDiTpMheE84kiGXuU3R7LsVJwFyAJ8A1C9Ckk935p4AAAAAElFTkSuQmCC"
    />
  </div>
</div>

解决方案 #

要实现需求，只需要给表格和图片的父容器添加相对定位，再给图片容器设置绝对定位并调整位置即可，DOM顺序完全不用改动，后续的hover效果也能正常实现。

修改后的CSS代码 #

table {
  width: 100%
}

table,
th,
td {
  border: 1px solid;
}

/* 给父容器添加相对定位，作为绝对定位的参考基准 */
.table-img-container {
  position: relative;
}

.div-img {
  position: absolute; /* 设置绝对定位 */
  top: 0;
  right: 0; /* 靠右对齐 */
  z-index: 10;
  /* 移除height:0，避免图片被截断 */
}

修改后的HTML代码 #

<div>Some text</div>
<div>Some more text</div>
<!-- 添加类名作为定位容器 -->
<div class="table-img-container">
  <table>
    <thead>
      <th>Column 1 </th>
      <th>Column 2 </th>
      <th>Column 3 </th>

    </thead>
    <tr>
      <td>Col_1_1</td>
      <td>Col_1_2</td>
      <td>Col_1_3</td>
    </tr>
    <tr>
      <td>Col_2_1</td>
      <td>Col_2_2</td>
      <td>Col_2_3</td>
    </tr>
    <tr>
      <td>Col_3_1</td>
      <td>Col_3_2</td>
      <td>Col_3_3</td>
    </tr>
  </table>

  <div class="div-img">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA90RVh0VGl0bGUAU2hvdztFeWU7SeMHJQAAAf1JREFUeF7tVjFrwkAYNf4JB2c3J+nf6OaYxdU/UVrsZAfByVGxQ8cgYhGSsXRoRHTIWi0VpJHSSrGg9Ou9cgeHueTSZCiFfPAg+L33vhdzuVyOiP4U/ytAFiAL0Gw2TxguGWyGZ4ZPgF/b6HFOToFEASDMM5gMcwaKiTnX5NMEgKjM4ArjXq9HjuPQYrGg7XZL+/0ewDV+Qw8cOQi05SQBIKgz7GDU7/dpOp1S3AIXGmi5Rz1uAAw2GFAEjEYjkuvlbUfW/SOdXT+QeeVQVEErfLinESdAS4g8zyO5vKdXatxM6PTiVoA0BQ85RCsqAIbXBHm1WgXuXAyXEaPgJYeoqQJgeJHhA6TZbHbsgb8dAwOIW/CEN59RVAXogDAYDFR6PPM0AQB4ixAdVYANmr7vq7RYcGkDwFsE2KgC+Giu12tNAD3AVRS8RQBfFaCNpmVZmkegB7iKgrcI0FYFKDC8gzAejyMWoR7gHhc84c1nFMJewyrDF4jL5VLzGqoBDrhywQue3Luq24ganIwtVbMRBYaDE9iWhR+8NTthMMRwOKTD4RC2FQO4xm/ynUMDbcRw/cfIFGui2+2S67oUs8CFRn7mZtLPcYnhDkYiiG3bYZ9j9OTBxLWltAcSgy/OCUxjYsI1RvIDiTpMheE84kiGXuU3R7LsVJwFyAJ8A1C9Ckk935p4AAAAAElFTkSuQmCC"
    />
  </div>
</div>

关键说明 #

1. 父容器设置position: relative，让内部的绝对定位元素以它为基准，不会跑到页面其他位置
2. 图片容器设置position: absolute + top:0 + right:0，就能精准定位到父容器的右上角，也就是表格的右上角
3. 保留原有DOM顺序，后续想要实现表格hover时显示图片，只需要添加.table-img-container:hover .div-img { display: block; }（若之前设置了隐藏）即可正常生效

内容的提问来源于stack exchange，提问作者AndrejK