CSS : 오버플로를 넘어선 절대 위치 지정 div : 숨김?

jquery 제품 슬라이더가 왼쪽으로 떠있는 여러 LI를 통해 회전합니다. 폭은 150px이고 높이는 200px이며 이미지와 텍스트가 약간 있습니다. UL을 보유하고있는 외부 컨테이너 div에는 overflow : hidden이 있으므로 한 번에 5 개의 LI 만 표시됩니다.CSS : 오버플로를 넘어선 절대 위치 지정 div : 숨김?

절대적인 위치가 포함 된 LI의 위쪽과 왼쪽 몇 픽셀을 부딪혀 추가 이미지를 붙이기 전까지는이 방법이 유용합니다.

목표는 항목의 왼쪽 상단 모서리에 투명한 "판매 된"모서리 배너 png 이미지를 갖는 것입니다. 그리고 LI의 측면 주위로 구부러진 것처럼 보이게하는 그림자와 강조 표시가 있습니다.

오버 플로우를 제외하면 멋져 보입니다. 숨겨진 몇 가지 추가 픽셀을 잘라내는 것처럼 보입니다. 나는 심지어 LI 주위에 여분의 마진과 패딩을 추가하려고 시도했지만 여전히 어떻게 든 끊어진다. ...

http://bit.ly/h5Uozo :

<div class="shadowblock_out"> 
<div class="shadowblockdir"> 
    <h2>Products</h2> 
    <div class="sliderblockdir"> 
     <div id="list"> 
      <div class="slider"> 
       <ul> 
        <li><div class="sold_90"><img src="sold_90.png" /></div>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="851441-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$50</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="827361-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$25</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="837216-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$55</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="940651-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$75</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="848712-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$90</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="903776-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$10</span> 
        <span class="right">XYZ</span> 
        </li> 

        <li>  
        <div class="featured-image"><a href="#"><img width="150" height="125" src="278773-150x125.png" /></a></div> 
        <div class="featured-info">Product info here</div> 
        <span class="left">$100</span> 
        <span class="right">XYZ</span> 
        </li> 
       </ul> 
      </div><!-- /slider --> 
     </div><!-- /list --> 

     <div class="clr"></div> 
    </div><!-- /sliderblock --> 
</div><!-- /shadowblock -->

그리고 CSS : 여기

내 코드입니다

.sold_90 { 
     display:block; 
     width:90px; 
     height:90px; 
     position:absolute; 
     z-index:9; 
     left: -5px; 
     top: -5px; 
     overflow: visible; 
    } 


     .shadowblock_out { margin:0 0 20px 0; border:1px solid #F5CF5B; /* overflow:hidden; */} 

     .shadowblockdir { 
      height:245px; 
      padding:8px 5px 5px; 
      background:#FFFFFD; 
      border:1px solid #fff; 
     } 
     /* featured listings homepage carousel */ 
     .featured-listings-home-top { 
      font-size: 16px; 
      color: #8E633E; 
      border-bottom-width: 1px; 
      border-bottom-style: dotted; 
      border-bottom-color: #A48061; 
      font-size: 16px; 
      font-style: italic; 
      color: #8E633E; 
      font-weight: bold; 
      margin: 0; 
      padding: 0; 
      padding-bottom: 5px; 
     } 
     .featured-listings-home-top span { 
      font-size: 12px; 
      color: #8E633E; 
      font-weight: normal; 
     } 
     .sliderblockdir { 
      height: 215px; 
      padding-top: 5px; 
     } 

     .slider { 
      float:left; 
      left:-5000px; 
      margin-left:15px; 
      position:relative; /* visibility:hidden; */ 
      height: 215px; 
      overflow: hidden; 
     } 
     .slider ul { 
      width:600px; 
      overflow: hidden; 
     } 
     .slider ul li a {text-decoration:none; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; line-height: 12px; margin-top: 5px;} 
     .slider ul li a:hover {text-decoration:underline;} 
     .slider ul li:hover { background-color:#FDE051;} 
     .slider ul li img { 

     } 
     span.price_sm { font-size:11px; font-style:italic; color:#666} 
     span.feat_left { float:left; text-align:center; width:55px; } 
     #list { 
      width:925px; 
      margin:0 auto; 
      height: 215px; 
     } 
     .slider { 
      margin: 0 auto; 
      position: relative; 
      left: 5px; 
      width: 925px; 
     } 
     .slider ul { 
      height:210px; 
      width: 100%; 
     } 
     .slider ul li { 
      width:160px; 
      position: relative; 
      float: left; 
      padding-right: 5px; 
      padding-bottom: 0px; 
      padding-left: 5px; 
      margin-right: 10px; 
      text-align: center; 
      background-color: #FFFFFD; 
      -moz-box-shadow: 1px 1px 5px #b7b7b7; 
      -webkit-box-shadow: 1px 1px 5px #b7b7b7; 
      box-shadow: 1px 1px 5px #b7b7b7; 
      -khtml-border-radius: 3px; 
      -moz-border-radius: 3px; 
      -webkit-border-radius: 3px; 
      border-radius: 3px; 
      height: 200px; 
      margin-left: 5px; 
      margin-top: 5px; 
      overflow: visible; 
     } 
     .slider ul li a {text-decoration:none; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; line-height: 12px; margin-top: 5px;} 
     .slider ul li a:hover {text-decoration:underline;} 
     .slider ul li:hover { background-color:#FDE051;} 
     .slider ul li img { 
      cursor:pointer; 
      margin: 0 auto; 
      position: relative; 
      text-align: center; 
     } 
     span.price_sm { font-size:11px; font-style:italic; color:#666} 
     span.feat_left { float:left; text-align:center; width:55px; } 
     #list li p { 
      display:block; 
      white-space: pre-wrap; /* Mozilla, since 1999 */ 
      white-space: -pre-wrap; /* Opera 4-6 */ 
      white-space: -o-pre-wrap; /* Internet Explorer 5.5+ */ 
      text-align: center; 
      width: 50px; 
     } 
     .captify { border:1px solid #CCC; float:left; margin:3px 10px 5px 0; padding:2px;} 
     .prev { cursor:pointer; float:left; padding-top:25px} 
     .next { cursor:pointer; float:right; padding-top:25px} 
     .featured_price {float:left; font-size: 10px; color:#FF0000; display: inline; width: 55px;} 
     .featured_location {font-size: 10px; color:#000; float: right;display: inline;} 
     .left { 
      float: left; 
      width: 100px; 
      font-size: 12px; 
      font-family: Georgia, "Times New Roman", Times, serif; 
      color: #AD6441; 
      font-weight: bold; 
     } 
     .right { 
      float: right; 
      width: 50px; 
      font-family: Georgia, "Times New Roman", Times, serif; 
     } 

     .featured-image img { 
      -moz-box-shadow: 1px 1px 5px #b7b7b7; 
      -webkit-box-shadow: 1px 1px 5px #b7b7b7; 
      box-shadow: 1px 1px 5px #b7b7b7; 
      -khtml-border-radius: 3px; 
      -moz-border-radius: 3px; 
      -webkit-border-radius: 3px; 

     } 
     .featured-image { 
      height: 125px; 
      margin-top: 10px; 
      padding: 2px; 
     } 
     .featured-info { 
      font-size: 11px; 
      color: #3F2A19; 
      font-weight: bold; 
      font-family: Georgia, "Times New Roman", Times, serif; 
      line-height: 14px; 
     }

그리고 여기에 "판매"이미지에 대한 링크입니다

나는이 코드를 작성하지 않았지만 수정 만하고있다. o 상자 주위에 "포장"처럼 보이도록 작은 판매 이미지를 LI 상자 너머로 -3px까지 확장하십시오. 그래서 누군가가 나를 도울 수 있다면 크게 감사하겠습니다! 정말 고마워!!

출처

2011-02-10 RodeoRamsey

http://jsfiddle.net/Mutant_Tractor/EGsad/

나는 다음과 같은 CSS를 추가? –

죄송합니다. 제 말에 오타였습니다. div.sold는 실제로 .sold_90 (이미지와 같음)을 말했고, 나는 그 수업을 내 CSS 스 니펫에 포함하는 것을 잊었다. 미안해. 그러나 그들은 거기에 있었다. – RodeoRamsey

이것은 어떤가요? 나는`div.sold`의 스타일을 볼 해달라고

.sold { 
    z-index: 999; 
    clear: both; 
    position: absolute; 
    margin-left: -10px; 
    margin-top: -5px; 
}

출처

2011-02-10 23:10:06

원래 질문에 오타를 만들었는데 판매 된 CSS는 내 설명에 포함되어 있지 않지만 코드에 포함되어 있습니다. 질문에서 원래 코드를 내 파일의 내용으로 수정했습니다. 죄송합니다!! – RodeoRamsey

아직 완벽하게 작동합니까? –

페이지의 나머지 부분에서 뭔가 다른 것과 관련이 있다고 생각합니다. 테스트 HTML 페이지를 설정하고 로컬에서 볼 때 작동합니다. 사이트의 나머지 부분에 추가하면 끊어집니다. jQuery 자바 스크립트 어딘가에있을 수 있습니다. – RodeoRamsey

CSS : 오버플로를 넘어선 절대 위치 지정 div : 숨김?

답변

관련 문제