html - 溢出隐藏隐藏位置绝对 block 。如果 Position Absolute block 在父 block 之外，则它会消失

这是我的风格。

<style>
.wrapper { margin:0px auto; height:600px; width:600px; position:relative; background:#F2F7FF; padding:20px; overflow:hidden }
.pos-rel { width:90%; background:#FFF; height:400px; position:relative; padding:5%; }
.pos-abs { position:absolute; height:100px; width:200px; position:absolute; background:#89BCFF; border:1px solid #517099; right:-110px; }
</style>

这是我的 HTML :

<div class="wrapper">
    Wrapper
    <div class="pos-rel">
        Position relative Parent block
        <div class="pos-abs">
            Position Absoulute child block
        </div>
    </div>
</div>

JSFIDDLE HERE

问题是: 具有绝对位置的 block 只有一半可见。由于包装，半 block 被隐藏。

在您给出任何解决方案之前，我必须声明我必须使用 Overflow:hidden 在父 block 中。

最佳答案

实际上，如果从 .wrapper 中删除 position:relative，就可以避免父级的 overflow:hidden。 Here is working example

关于html - 溢出隐藏隐藏位置绝对 block 。如果 Position Absolute block 在父 block 之外，则它会消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24056401/