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

删除

position:relative;

来自

.memorytile{}

这应该解决问题。

Answer 2

你的memorytile div都被设置为相同的z-index，但是因为tile2在tile1之后，所以它被视为高于它。内存位于tile1内（现在位于tile2之下，因此您可以获得所见效果。

将tile1的z-index更改为高于tile2，它将起作用。我更新了你的小提琴：http://jsfiddle.net/RkpAe/2/

在http://webdesign.tutsplus.com/

上也有一个很好的解释

Floated Div导致裁剪子div /图像溢出

2 个答案: