web-dev-qa-db-ja.com

オーバーフロー：非表示が機能しない

ちょっとすべて、私はオーバーフローで苦労しています：隠されました。基本的に、divにある順序付けられていないリストのオーバーフローを隠そうとしています。しかし、なぜこれが機能しないのかわかりません。非表示にする代わりに、私のliを水平レイアウトから垂直レイアウトに分割します。順序なしリストはカルーセルで、コンテナはリストです。私のコードは次のとおりです。

CSS：

div.body .container .images {
 background: url(/images/images-background.jpg);
 height: 62px;
 margin-bottom: 17px;
 width: 384px;
}
div.body .container .images #images-previous {
 cursor: pointer;
 float: left;
}
div.body .container .images #images-next {
 cursor: pointer;
 float: left;
}
div.body .container .images .list {
 float: left;
 overflow: hidden;
 vertical-align: top;
 width: 336px;
}
div.body .container .images .carousel {
 margin-bottom: 6px;
 margin-top: 8px;
 width: 336px;
}

私のコード：

<div class="images">
 <div id="images-previous"><img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" /></div>
 <div class="list">
  <ul class="carousel">
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li> 
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>    
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <li><img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" /></li>
   <!---
   <cfset i=1>
   <cfloop condition="i lte images.recordcount">
    <cfoutput><li><img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" /><img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" /><img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" /></li></cfoutput>
    <cfset i=i+1>
   </cfloop>
   --->
  </ul>
 </div>
 <div id="images-next"><img src="/images/images-next.jpg" width="24" height="62" alt="Next" /></div>
 <div class="clear"></div>

助けてくれてありがとう。

cssoverflowhtml
101
Darren

他の誰かがこの問題を抱えているなら、これはあなたの答えかもしれません：

絶対配置要素を非表示にしようとしている場合は、それらの絶対配置要素のコンテナが相対的に配置されていることを確認してください。

353
Darren

実は...

絶対位置の要素を非表示にするには、コンテナpositionはstaticを除くものでなければなりません。 relativeに加えて、fixedまたはabsoluteにすることができます。

71
rw-nandemo

提供された回答に加えて：

親要素（overflow:hiddenを持つ要素）のようです必須ではありません be display:inline。 display:inline-blockに変更するとうまくいきました。

.outer {
  position: relative;
  border: 1px dotted black;
  padding: 5px;
  overflow: hidden;
}
.inner {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 70%;
  width: 40px;
  height: 80px;
  background: yellow;
}
<span class="outer">
  Some text
  <span class="inner"></span>
</span>
<span class="outer" style="display:inline-block;">
  Some text
  <span class="inner"></span>
</span>
5
Miloš Đakonović