溢出隱藏隱藏位置絕對塊。如果位置絕對塊位於父塊之外而不是消失

這是我的風格。溢出隱藏隱藏位置絕對塊。如果位置絕對塊位於父塊之外而不是消失

<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：隱藏在父塊中。

來源

2014-06-05 Husen

爲什麼你需要使用overflow：隱藏的包裝？也許你可以避免它，也許這應該是真正的問題 – fcalderan

如果你必須有溢出：隱藏在包裝中，沒有辦法讓絕對div在包裝外使用只是CSS。你需要一些js代碼。 – Alvarez

實際上，如果您從.wrapper中刪除position:relative，則可以避開父母的overflow:hidden。 Here is working example

來源

2014-06-05 09:49:37

你能告訴我你要創建什麼就好像你正在使用overflow：hidden那麼它不會來。否則你必須從右邊減去右邊距。你能說得更清楚嗎爲什麼你想要這個..

來源

2014-06-05 10:17:39 Tony

溢出隱藏隱藏位置絕對塊。如果位置絕對塊位於父塊之外而不是消失

回答

相關問題