Question

我们有这样的轮播代码：

<div style="width:280px; height:100px; border:1px solid red; overflow:hidden; ">
    <ul>
        <li style="position:relative; width:200px; height:50px; list-style-type:none; background:yellow;">
            <div style="position:absolute; top:10px; left:10px; width:180px; height:150px; background:Pink; z-index: 99;">
                <br/>
            </div>
        </li>
    </ul>
</div>

最后一个位于绝对位置的div正在裁剪。有没有办法通过仅更改ccs代码才能正常工作？

Answer 1

如果您不想删除overflow: hidden，那么您可以删除内部position:relative的{{1}}，还可以删除一些新的外部div并添加适当的顶部和左侧粉红色div的值如下所示。

li

这是我能弄明白的唯一方法！

Answer 2

您已将overflow:hidden提供给div

的主width:280px

所以最后div与position:absolute被切断了。

Answer 3

  <div style="width:280px; height:100px; border:1px solid red; /* removed overflow:hidden; */ ">
    <ul>
        <li style="position:relative; width:200px; height:50px; list-style-type:none; background:yellow;">
            <div style="position:absolute; top:10px; left:10px; width:180px; height:150px; background:Pink; z-index: 99;">
                <br>
            </div>
        </li>
    </ul>
</div>

CSS：position：绝对裁剪在非最近的溢出内：隐藏的父级

3 个答案: