<p>Der Link im Beispiel unten (rot umrandet) wurde absolut positioniert. Hier ist als <code>href</code> nur "#" angegeben, dadurch wird beim Draufklicken die Seite neu geladen. Anstelle des #-Zeichens wird einfach wie bei jedem anderen Link das gewünschte Ziel eingefügt.</p>
<hr/>
<div class="container">
<a href="#" class="clickable"></a>
<img src="https://i.postimg.cc/KjtjnrjR/memory-bg2.jpg)" alt="demoimage">
</div>
<hr/>
<p>Ihr könnt zur Übung im CSS z.B. die Position verändern und somit scheinbar ein anderes Bildchen klickbar machen, oder weitere Links hinzufügen.</p>
p{
font-family: Calibri, sans-serif;
font-size: 20px;
}
.container{
position: relative;
}
.container>img{
display: block;
}
.clickable{
position: absolute;
border: 2px solid red;
top: 5px;
left: 15px;
width: 90px;
height: 85px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.