[CSS] Bilder übereinander setzen

Dieses Thema im Forum "Webdesign" wurde erstellt von master2005, 17. Juni 2012 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 17. Juni 2012
    Bilder übereinander setzen

    Hallo,

    es stellt sich ein Problem für mich da und ich hoffe Ihr könnt mit vielleicht weiterhelfen.

    Ich möchte untereinander kleine Bilder ausgeben. Bei manchen Bilder die ich sehr gut finde soll zusätzlich ein Siegel mit ins Bild oben rechts in die ecke Positioniert werden. Dies kann aber pro Seite mehrmas passieren.

    Meine Idee war diese

    Code:
    <style>
    .wrapper
    {
    width:215px;
    border:1px solid red;
    z-index: 1;
    
    }
    
    
    .siegel
    {
    background:red;
    width:40px;
    height:40px;
    z-index: 1;
    position: absolute;
    left:200px;
    top:12px;
    }
    </style>
    
    
    <div class="wrapper">
     <div class="siegel"></div>
     <img src="http://127.0.0.1/entryIMG/m/r9HaMutNBfVfkZmFCNtaLer1yRH9O8.jpg" />
    </div>
    
    <div class="wrapper">
     <div class="siegel"></div>
     <img src="http://127.0.0.1/entryIMG/m/r9HaMutNBfVfkZmFCNtaLer1yRH9O8.jpg" />
    </div>
    
    nur leider und logischerweise ist das das Siegel(rote Kasten) nur beim obersten zu sehen.
     
  2. 17. Juni 2012
    AW: Bilder übereinander setzen

    // Mist, auf Bedanken geklickt ...

    Das ist nicht ganz Richtig.

    Das Siegel ist 2 mal vorhanden, nur richtet es sich nicht an dem Gewollten Element aus.

    Position: relative sollte das Problem beheben!
    HTML:
    .wrapper {
     position: relative;
     width: 215px;
     border: 1px solid red;
     z-index: 1;
    }
    
     
  3. 17. Juni 2012
    AW: Bilder übereinander setzen

    Cool,

    vielen Dank...
    BW ist raus!


    Schönene SO. noch.
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.