2011-09-28 97 views
7

我有一個絕對定位的div與溢出自動。在這個div裏面是另一個絕對定位的div。我的問題是這個子div由於溢出而被切斷。我想讓它逃離容器div,因爲它沒有設置溢出。我曾嘗試設置Z索引,但它沒有幫助。我能做什麼?絕對定位的div與溢出自動導致子絕對div被切斷

HTML

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS

.parent { 
    position:absolute; 
    z-index:0 
    overflow:auto; 

    width:400px; 
    height:400px; 

    border:1px solid #000; 
} 

.child { 
    poisiton:absolute; 
    z-index:1 

    width:300px; 
    height:450px; 

    border:1px solid #f00; 
} 
+1

+1。 [jsfiddle](http://jsfiddle.net)很受歡迎'圍繞這些部分。 – Alex

+1

我已經這樣做了。正如你所看到的,小孩div不會從父母那裏出來。 – user969622

+1

如果你不想滾動,你爲什麼使用'overflow:auto'? – Jacob

回答

1

如果你想一些元素不會溢出家長和一些元素沒有,你會更好,讓目前的孩子目前父母以外的div。只要讓它成爲一個絕對定位的同行。

+0

那我怎麼才能讓它從父div中的引用點出現?例如,如果它位於父div內,並且在某些文本旁邊,它會彈出該文本旁邊,但是如果我將div移到父div之外 - 那麼如何讓該對象在該子文本旁邊彈出不再在它旁邊? – user969622

+0

含義您希望它與其餘內容一起滾動並彈出以及?我想你會需要JavaScript來達到這個效果。 – Jacob

+0

如果您正在使用jQuery,那麼您可以使用滾動事件。然後您必須計算滾動位置並根據該位置移動第二個div。請參閱http://api.jquery.com/scroll/。 – Jacob

2

看看你是否可以依靠另一種方法清除你的浮標。將您的CSS更改爲overflow: visible絕對是一個很好的解決方案。

你其他的解決辦法是把它的容器外的股利,因此沒有得到切斷,並把他們一個新的容器的內外:

<div class="container"> 
    <div class="parent"> 
    </div> 
    <div class="child"> 
    </div> 
</div> 

CSS:

.container { 
    /* apply positioning from .parent */ 
} 
.parent { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.child { 
    /* apply positioning from .child */ 
}