浮動的Div導致裁剪的子div /圖像溢出

Question

我有一系列浮動的div與絕對定位的圖像內每個。

如果此圖像大於div寬度，則會出現裁剪。

儘管我已經設置了溢出：浮動和他們的父div可見他們仍然裁剪圖像。

下面是一個的jsfiddle示出一個例子：http://jsfiddle.net/RkpAe/1/

CSS：

#main, #memorycontainer { height: 100%; width: 100%; overflow: visible; } 

.memory { width: 250px; position: absolute; z-index: 98; width: 100px; height: 100px; overflow: visible; background: red;} 

.memory { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 100; -webkit-border-radius: 50%; cursor: pointer; } 

.memorytile { position: relative; z-index: 97; background: yellow; height: 300px; width: 200px; overflow: visible; float: left; margin: 0; padding: 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } 

HTML：

<div id="main"> 
<div id="tile1" class="memorytile"> 
    <div class="memory" style="top: 50px; left: 150px;"> 
      Icon</div> 
    Background Image 
    </div> 
<div id="tile2" class="memorytile"></div> 

Answer 1

您的memorytile divs都被設置爲相同的z-index，但由於tile2在tile1之後被視爲高於它。內存tile1內（也就是現在的低於tile2，所以你得到你所看到的效果

變化tile1的z指數比tile2更高，它會工作 我更新了你的提琴：。http://jsfiddle.net/RkpAe/2/

也有這樣的http://webdesign.tutsplus.com/

Answer 2

除去

position:relative; 

從

.memorytile{} 

這應該解決這個問題。