Feste Position CSS für ein Bild in einer Tabellenzelle

Question

Ich habe ein kleines Problem mit Bildern in der Tabellenzelle. Ich habe einen Tisch mit 3 Reihen. In der mittleren Reihe habe ich ein Bild (das ist ein Link, also kein Hintergrund). Ich möchte ein zweites Bild teilweise über das erste (wie eine Briefmarke) legen, ohne die Größe der Zelle zu verändern. Es muss in der Ecke der Zelle sein.

Sehen Sie dieses Beispiel von dem, was ich brauche:

.

Ich möchte absolute Positionierung vermeiden, weil ich wenige Tabellen auf der Seite habe. Manche brauchen die Marke und manche nicht.

Ich habe dies mit position:relative versucht, aber es ändert die Größe der Zelle, die das Bild unter dem ersten setzt.

Können Sie mir helfen?

Answer 1

Ich habe diese fiddle für Sie erstellt.

Bild B ist oben auf Bild A und Bild A ist anklickbar und beide sind natürlich in einer Tabellenzelle, genau wie Sie es wollten.

Das einzige, was ich nicht gelöst habe, ist das position: absolute Ich weiß, dass Sie das nicht verwenden wollten, aber ich sehe wirklich keine andere Möglichkeit, es zu tun. Sie könnten position: fixed verwenden, aber sobald der Benutzer nach unten scrollt, wird die Tabelle unter den Bildern verschwinden und Sie werden diese Bilder auf Ihrer ganzen Seite haben.

Ich hoffe, dass dir das hilft. Prost.

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 es nutzen zu können, ist kein guter Weg, um Daten zu präsentieren. Ein besserer Weg ist die Verwendung des Styles div -s. 2. Note ist über position: absolute. Die absolute Positionierung des Elements wird von der Position des Elternelements gezählt. Definieren Sie einfach (für Ihr Problem) bottom: 0; right: 0;, so dass Sie kein Kind-Bild weit außerhalb seines Elternteils erhalten und es in die rechte untere Elternecke bringen. Hier ist meine Lösung (JSFiddle), die trotz der Menge der geleisteten Tabellen arbeitet:

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>