テーブルセル内の画像の固定位置CSS

Question

テーブルセルの画像に少し問題があります。私は3行のテーブルを持っています。中段には写真があります（これはリンクなので背景はありません）。私は、セルのサイズを変更することなく、最初のもの（スタンプのようなもの）の上に部分的に2番目の画像を置きたいと思います。それは細胞の隅にある必要があります。

：

は私が必要なもののこの例を参照してください。

私はページ上にテーブルがほとんどないので絶対的な配置を避けたいと思います。スタンプが必要なものとそうでないものがあります。

私はposition:relativeでこれを試しましたが、最初の画像の下に画像を置くセルのサイズが変わります。

私を助けることができますか？

Answer 1

私はこれをfiddleのために作成しました。

イメージBはイメージAの上にあり、イメージAはクリック可能であり、どちらももちろんテーブルセル内にあります。

私が解決しなかった唯一のことは、position: absolute です。あなたはそれを使用したくないと知っていますが、私は正直なところ、それを行う方法はありません。 position：fixedを使うことができますが、ユーザーが下にスクロールするとすぐに、テーブルが写真の下に移動し、ページ全体の上にこれらの写真が表示されます。

私はあなたに役立つことを願っています。乾杯。

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です。 2番目の注釈は約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>