css - 当我改变它的绝对位置时，表格是不规则的

Question

在我的页面中，我有一个这样的表：

 <table>
                    <tr>
                        <td >
                            <img  src="images/End_051.png" />

                        </td>
                        <td>
                            <img src="images/End_051.png" />

                        </td>

                    </tr>
                     <tr>
                        <td >
                             <img src="images/End_051.png" />


                        </td>
                         <td>
                             <img src="images/End_051.png" />

                         </td>

                    </tr>

                </table>

当我改变td位置时：绝对与 css 图像相互折叠：http: //upload7.ir/images/51794162496232235063.jpg

有什么解决办法吗？

Answer 1

您会看到这种行为，因为绝对定位的元素已从文档的正常流程中删除。

当一个元素被绝对定位时，其他元素的行为就像绝对定位的元素不存在一样。这就是为什么所有图像（在td元素内）都重叠并相互堆叠的原因。

以下是两种可能的解决方案：

1. 如果要保持元素绝对定位，可以使用top: xpx和手动定位每个元素left: xpx。将 x 替换为您想要偏移图像的所需像素数量。
2. 或者，当用户将鼠标悬停在图像上时，您可以使用CSS3 2d 转换来 缩放图像。img:hover

这是第二种解决方案的代码：

img {
    height: 50px;
    width: 50px;
    background-color: blue;
}
img:hover{
    transform: scale(2);
    -ms-transform: scale(2); /* IE 9 */
    -webkit-transform: scale(2); /* Safari and Chrome */
}

这是第二种解决方案的工作示例。