css - float Div 导致裁剪子 div/图像溢出

Question

我有一系列 float 的 div，每个 div 中都有绝对定位的图像。

如果此图片大于 div 宽度，则它会被裁剪掉。

虽然我已经设置了 overflow:visible 到 floats 和它们的父 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

删除

position:relative; 

来自

.memorytile{}

这应该可以解决问题。