表格单元格中图像的固定位置CSS

Question

我对表格单元格中的图像有点问题。我有一个3行的表。在中间一排，我有一张照片（这是一个链接，所以没有背景）。我想在第一张照片（如邮票）上部分放置第二张照片，而不改变小区的大小。它需要在单元的角落。

见的什么，我需要这个例子：

。

我想避免绝对定位，因为我在页面上有几张表。有些需要邮票，有些则不需要。

我试过这个与position:relative，但它改变了单元格的大小把图片放在第一个。

你能帮我吗？

Answer 1

我已为您创建此fiddle。

图片B位于图片A的顶部，图片A是可点击的，两者当然都在表格单元中，完全如您所愿。

我没有解决的唯一问题是position: absolute 我知道你不想使用它，但我实在没有看到任何其他方式来做到这一点。 您可以使用位置：固定，但只要用户向下滚动，表格就会在图片下方移开，您将在整个页面上显示这些图片。

我希望能帮到你。干杯。

table, tr, th, td { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
} 
 
tbody tr td { 
 
    width: 500px; 
 
    height: 350px; 
 
} 
 
.footer td { 
 
    border: 1px solid black; 
 
    height: 10px; 
 
    width: 10px; 
 
} 
 
.back { 
 
    position: absolute; 
 
    z-index: 0; 
 
    width: 400px; 
 
    margin: -130px 0 0 50px; 
 
} 
 
.front { 
 
    position: absolute; 
 
    z-index: 1; 
 
    width: 150px; 
 
    margin: 75px 0 0 352px; 
 
}

<table> 
 
<theader> 
 
    <tr> 
 
    <th colspan=2>HEADER</th> 
 
    </tr> 
 
    </theader> 
 
    <tbody> 
 
    <tr> 
 
    <td colspan=2> 
 
    <a href="#"><img class="back" src="http://www.w3schools.com/css/rock600x400.jpg"></a> 
 
     <img class="front" src="http://www.w3schools.com/css/lights600x400.jpg"> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
    <tr class="footer"> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

Answer 2

要使用table -s不呈现数据的好办法。更好的方法是使用样式div-s。 第二注是关于position: absolute。元素的绝对位置从父元素的位置开始计数。只需定义（针对您的问题）bottom: 0; right: 0;，这样您就不会在远离其父母的位置获得一张小孩图像，并将其放在右下方的父母角落。 这里是我的解决方案（JSFiddle）的作品尽管呈现表的数量：

div { 
 
    width: 300px; 
 
    border: none; 
 
    float: left; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.wrapper { 
 
    margin: 2px; 
 
} 
 
.header { 
 
    text-align: center; 
 
    background-color: #DD8; 
 
    width: 100%; 
 
    padding: 5px 0; 
 
} 
 
.cont { 
 
    height: 300px; 
 
    background-color: #CDF; 
 
    padding: 0; 
 
} 
 
.image { 
 
    width: 250px; 
 
    height: 250px; 
 
    background-color: #CCC; 
 
    margin: 25px; 
 
} 
 
.stamp { 
 
    background-color: #888; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
.footer { 
 
    text-align: center; 
 
    background-color: #9EE; 
 
    width: 50%; 
 
    padding: 5px 0; 
 
    border: 1px solid #7CC; 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 
    <div class="header"> 
 
     header1 
 
    </div> 
 
    <div class="cont"> 
 
     <a href=""><img src="" class="image" alt="Image1"></a> 
 
     <img src="" class="stamp" alt="stamp1"> 
 
    </div> 
 
    <div> 
 
     <div class="footer"> 
 
      footer-1-1 
 
     </div> 
 
     <div class="footer"> 
 
      footer-1-2 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="header"> 
 
     header2 
 
    </div> 
 
    <div class="cont"> 
 
     <a href=""><img src="" class="image" alt="Image2"></a> 
 
     <img src="" class="stamp" alt="stamp2"> 
 
    </div> 
 
    <div> 
 
     <div class="footer"> 
 
      footer-2-1 
 
     </div> 
 
     <div class="footer"> 
 
      footer-2-2 
 
     </div> 
 
    </div> 
 
</div>