Sticker über ein Bild legen

[lachender_engel]

Hallo, Zusammen.
Ich hoffe auf Eure Hilfe, da mir (aus welchen Gründen gerade auch immer :-( ) ein Ansatz fehlt.
Es gibt ein Bild, das in einem Div-Container liegt (nichts aufregendes). Der Code sieht so aus:

<div class="picFrame">
  <a href="#">
    <img class="attachment-page-img post-image" width="640" height="350" alt="Text" src="bild.jpg">
  </a>
</div>

Das CSS zur class picFrame sieht so aus:

.picFrame {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) inset, 0 0 2px rgba(0, 0, 0, 0.15) inset;
    display: block;
    line-height: 0;
    overflow: hidden;
    padding: 10px;
}

Jetzt möchte ich z.B. über die linke obere Ecke einen Sticker setzen (so was wie "nur heute" oder "Sonderangebot"). Hier mal ein Muster:

Ich habe gerade keine Idee, wie ich den Sticker über das Bild lege. Meine erste Idee ist es den Div-Container des Bildes in einen weiteren Div-Container zu legen, der dann den Sticker über das Bild lagert. Doch meine Versuche scheitern, da zum Beispiel der Sticker vom Bild überlagert wird. Ich habe auch schon mit z-index rumprobiert. Kein Erfolg. Ich denke, ich mache da einen Denkfehler.
Hat hier jemand einen Tipp, wie ich den Sticker über das Bild bekomme?

Danke vorab für Eure Hilfe!

P.S.: Ich kann leider noch nichts online zeigen, da die Seite nicht online ist und das Bild bzw. die Vorgabe aus Photoshop kommt.

 

[afr0kalypse]

wenn du die größe von dem bild und die größe von dem sticker weißt, könnte man es so machen:
http://jsfiddle.net/DjsM8/21/
geht bestimmt auch eleganter
zu z-index: das funktioniert nur, wenn position: absolute/relative angegeben wird.

 

[cebito]

Klick http://jsfiddle.net/hK8x3/1/

 

[lachender_engel]

Perfekt! Ich danke Euch vielmals. Das war der Anstoß, den ich brauchte (um nicht zu kompliziert zu denken ;-)). Ihr habt mir sehr geholfen!

 

[lachender_engel]

Hallo, Zusammen.
Ich brauche in dem Teil noch mal Eure Hilfe.
Das mit dem Sticker übers Bild habe ich hinbekommen. Nur leider habe ich zwei Probleme:
1.) Da meine Seite adaptive ist (also Anpassung der Dastellung nach Auflösung des Gerätes), ich den Sticker per top in den negativen Bereich schiebe, ist er nicht da wo er hinsoll, wenn sich die Auflösung ändert. Denn in dem Fall ändert sich auch die Höhe des Bildes.
2.) der Div-Container ist zu hoch - und zwar um die Höhe des Stickers.

Hier der Code: http://jsfiddle.net/592KU/

Hat jemand eine Idee, wie ich das lösen kann?

 

[cebito]

Werd dir mal über die Bedeutung und Wirkung von "position" klar. Lies dich da bitte mal richtig ein! Es bringt dir nix so rumzuprobieren ohne zu wissen was du da eigentlich wirklich machst.

 

[lachender_engel]

Hallo, cebito.
Bisher war ich der Meinung die Wirkung von position zu kennen. Aufgrund Deines Hinweises habe ich mir die Beschreibung erneut durchgelesen und auch Tests damit gemacht. Beides hat mich leider nicht zu meinem Ergebnis geführt.
Anscheinend verstehe ich dann doch die Wirkung von position nicht dahin, wie Du es vermutlich meinst. Ich finde, auch nach erneuter Lektüre der Paramter für position, keine Lösung für mein Problem.
Anscheinend weißt Du aber wie es sich lösen lässt?! Würdest Du mich an Deinem Wissen teilhaben lassen?!
Danke!

 

[cebito]

http://www.css4you.de/position.html

relativ: Relative Positionierung vom normalem Fluß. Die normale Position ist wie bei static im normalem Textfluß. Die Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben

Deshalb ist dein Container so hoch. Hab mein Beispiel nochmal angepasst, verschieden große Bilder, gleiche Klassen. http://jsfiddle.net/hK8x3/10/ Beachte bitte wie und welche Form von position ich für die verschiedenen Elemente verwende! Und lass dein overflow:hidden; endlich weg!

 

[lachender_engel]

Hallo, Cebito. Danke für Deine neue Antwort die mich auf den richtigen Weg gebracht hat. Ich hatte position in Bezug auf die class für den Störer betrachet und übersah position in der Class für das Bild. Nun habe ich den Zusammenhang verstanden.
Vielen Dank noch mal, dass Du Dir die Mühe gemacht hast!

 

[Alice2020]

Perfekt! genau das was ich gesucht habe