nicht angemeldet
Rolf bUnabhängig von grundsätzlichen Erwägungen zu Responsive Design...
Wenn du beim hovern über dem Rezeptbild einen Text einblenden willst, kannst Du das auch mit einem title-Attribut tun, das ist ein Tooltip, da musst Du gar nichts weiter machen.
Mit position:absolute nimmst Du ein DOM Element aus dem normalen Fluss heraus. D.h. für die Berechnung der Größe des Containers, wo das position:absolute Element drin steht, wird es dann nicht mehr herangezogen. Du musst also ggf. den Container, in dem das absolut positionierte Element angezeigt werden soll, per width oder height groß genug machen.
Zweiter Aspekt bei position:absolute ist, dass der Browser sich ein Bezugselement sucht, relativ zu dem er das absolut positionierte Element anordnet. Der CSS 2.1 Standard sagt: Dieses Bezugselement ist das "nächstgelegene positionierte Elternelement". Ein Element ist positioniert, wenn es eine position: Angabe im Style hat (ggf auch wenn es ein float: ist, bin nicht ganz sicher). Das äußerste positionierte Element ist <body>, d.h. wenn Du kein eigenes positioniertes Element in der Elternhierarchie hast, landen alle absolut positionierten Elemente oben links.
Ein Element positionieren ohne die Position zu verändern - das geht mit position:relative. Wenn Du also deinen <li> Elementen einen Style position:relative gibst, werden deren absolut positionierte Kindelemente mit Bezug auf das Listenelement positioniert, in dem sie stehen.
Gruß Rolf
Matthias Apsel