오른쪽 상단 모서리에 이미지 배치-CSS

div의 오른쪽 상단 모서리에 이미지를 표시해야하지만 (이미지는 "대각선"리본 임) 내부 div에 포함 된 현재 텍스트는 상단에 붙어있는 것처럼 유지해야합니다.

다른 div에 이미지를 포함하거나 클래스를 다음과 같이 정의하는 것과 같이 다른 작업을 시도했습니다.

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

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

그러나 운이 없습니다. 내가 얻은 최고의 결과는 이미지의 동일한 높이 크기로 모든 텍스트를 아래로 스크롤하는 것입니다.

어떤 생각?

다음과 같이 할 수 있습니다.

#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>

의 위치를 div상대적으로하고, 그 안에 절대적으로 리본을 놓습니다. 다음과 같은 것 :

#content {
  position:relative;
}

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

같은 문제를 보면서 예를 찾았습니다.

<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>

여기서 트릭은 투명한 배경을 가진 작은 PNG (또는 GIF)를 만든 다음 (그런 다음 반대쪽 하단 모서리를 삭제하기 만하면됩니다.)