2013-02-11 66 views
0

存在一個包含浮點元素組''的溢出的'容器':auto。在'價值'裏面,有一個絕對定位的元素,'popup'被溢出切斷。我怎樣才能讓'popup'出現,並仍然使'容器'失去其佈局?溢出與浮點內的絕對位置衝突

HTML

<div class="container"> 
    <div class="group"> 
    <span class="label">Label</span> 
    <span class="value"> 
     <span class="popup_container"> 
     <div class="popup">Popup</div> 
     </span> 
    </span> 
    </div> 
    <div class="group"> 
    <span class="label">Label</span> 
    <span class="value"> 
     <span class="popup_container"> 
     <div class="popup">Popup</div> 
     </span> 
    </span> 
    </div> 
</div> 

CSS

.container { 
    overflow: auto; 
    background-color: red; 
} 
.label { 
    float: left; 
    clear: left; 
    width: 100px; 
} 
.value { 
    float: left; 
} 
.popup_container { 
    position: relative; 
} 
.popup { 
    position: absolute; 
    height: 200px; 
    width: 200px; 
    background-color: orange; 
} 

請參閱http://jsfiddle.net/KA7AB/2/

感謝

回答

2

設置你的popup_container絕對:

position: absolute; 

http://jsfiddle.net/KA7AB/6/

+0

謝謝,但我不能將其設置爲絕對的,因爲有可能是在容器內許多領域的每一個都有自己的彈出窗口。 – clarinet 2013-02-11 22:50:13

+0

爲什麼?我的意思是,內容的語義是什麼,以便彈出窗口必須嵌套? – 2013-02-11 22:52:27

+0

我試圖簡化CSS,但我想它失去了一些意義。每個組都是一個真正的標籤值對。該組值具有查看和編輯模式。彈出窗口在編輯模式下顯示。爲簡單起見,我忽略了視圖部分,但它不應該在這裏對問題產生任何影響。看到我編輯的帖子。 – clarinet 2013-02-12 04:19:08