浮动 div 导致裁剪子 div/图像溢出

Posted 2023-02-25

【中文标题】浮动 div 导致裁剪子 div/图像溢出

【英文标题】：Floated Div causing cropping child div/image overflow

【发布时间】：2014-02-19 08:58:08

【问题描述】：

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

如果此图像大于 div 宽度，则会显示为已裁剪。

虽然我设置了overflow:visible to the floats and their parent 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>

【问题讨论】：

请创建jsfiddle.net

这里是 OP 代码的精简 jsfiddle，删除了冗余和不需要的声明。 jsfiddle.net/sheriffderek/cqtSU

【参考方案1】：

删除

position:relative; 

来自

.memorytile

这应该可以解决问题。

【参考方案2】：

您的两个memorytile div 都设置为相同的 z-index，但因为 tile2 在 tile1 之后，它被视为在它之上。内存在 tile1 内（现在在 tile2 下面，所以你得到了你所看到的效果。

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

http://webdesign.tutsplus.com/ 上也有一个很好的解释

【讨论】：

谢谢你，这是我忽略的事情