表格單元格中圖像的固定位置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>