CSS : 목록 항목에 배너를 추가하기 전에

Question

하나의 목록 항목에 "coming soon"배너를 추가해야합니다. 배너는 li와 관련하여 절대 위치에 있어야하므로 li를 감싸는 것처럼 보입니다. 배너 절대적 것을 시각적으로는 내용의 주위에 포장 나타나도록 목록 항목 (중지 곳에 배너를 숨어 리

관련하여 위치 할 점점

• :

  내가 가진 문제를 해요 만). 그것이 지금 서서 그것의 어색하게 지나서 li. 이 사이트는 반응이 좋으므로 고정 된 너비와 높이를 설정하면 해답이 아닐 수도 있으며 이미지가 컨테이너에 의해 클리핑되는 위치를 찾는 효과가 없습니다.

는 내가 검토를 위해 여기에 바이올린을 만들었습니다 http://jsfiddle.net/zQxSW/1/

<ul> 
    <li class="coming-soon"></li> 
    <li></li> 
    <li></li> 
</ul> 

ul{ 
    list-style: none; 
} 

li{ 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    background-color: #333; 
    display: inline-block; 
    border-radius: 5px; 
} 

.coming-soon:before{ 
    width: 150px; 
    height: 35px; 
    line-height: 37px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    text-align: center; 
    position: absolute; 
    background: #e92629; 
    top: 24px; 
    left: -34px; 
    color: white; 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    content: "coming soon"; 
    overflow: hidden; 
} 

감사합니다!

Answer 1

는

li { 
    overflow: hidden;  /* "hiding the banner where the list item stops" */ 
    position: relative; /* "getting the banner to be absolutely positioning 
           in relation to the li" */ 
} 

jsFiddle Demo