Platzieren Sie ein Bild in die Rechte Obere Ecke - CSS

Brauche ich, um ein Bild anzuzeigen, das auf der oberen rechten Ecke ein div-Element (das Bild ist ein "diagonal" - ribbon), sondern halten den aktuellen text in einen internen div, geklebt an der Spitze der es wie im moment.

Ich habe versucht, verschiedene Dinge, wie das Bild in einem div oder die Definition der Klasse wie:

.ribbon {
   position: relative;
   top: -16px;
   right: -706px;
}

<div id="content">
   <img src="images/ribbon.png" class="ribbon"/>
   <div>some text...</div>
</div>

aber ohne Glück. Das beste Ergebnis bekam ich, war, dass der text nach unten gescrollt hat, die für die gleiche Höhe Größe des Bildes.

Irgendeine Idee?

InformationsquelleAutor der Frage Randomize | 2011-09-02

  1. 177

    Können Sie tun es einfach so:

    #content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
}

<div id="content">
    <img src="images/ribbon.png" class="ribbon"/>
    <div>some text...</div>
</div>

    InformationsquelleAutor der Antwort Rok Kralj

  2. 23

    Position der div relativ, und die position der Band absolut drin. So etwas wie:

    #content {
  position:relative;
}

.ribbon {
  position:absolute;
  top:0;
  right:0;
}

    InformationsquelleAutor der Antwort Gary Chambers

  3. 4

    Während der Blick auf das gleiche problem, ich fand ein Beispiel 

    <style type="text/css">
#topright {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 125px;
    width: 125px;
    background: url(TRbanner.gif) no-repeat;
    text-indent: -999em;
    text-decoration: none;
}
</style>

<a id="topright" href="#" title="TopRight">Top Right Link Text</a>

    Der trick hier ist, um erstellen Sie eine kleine, (ich habe GIMP) als PNG (oder GIF) mit einem transparenten hintergrund (und dann löschen Sie einfach die gegenüberliegenden unteren Ecke.)

    InformationsquelleAutor der Antwort Alexx Roche

Schreibe einen Kommentar