Question

这是我的风格。

<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

问题是：具有绝对位置的块仅可见一半。由于包装，半块被隐藏。

在你给出任何解决方案之前，我必须声明我必须使用Overflow：隐藏在父块中。

Answer 1

实际上，如果您从overflow:hidden删除position:relative，则可以避免使用父.wrapper。 Here is working example

Answer 2

你能告诉我你想要创造什么吗？就像你使用溢出：隐藏然后它不会来。否则你必须从右边减少右边减去边距。你能说得更清楚吗？为什么你想要这个......

溢出隐藏隐藏位置绝对块。如果位置绝对块超出父块，则它将消失

2 个答案: