相對位置的HTML元素重疊父節點

Question

我對元素有一些非常具體的要求（目前這些元素是跨度的，但這對於我的問題並不重要）必須在網頁中顯示。

基本的問題是，相對位於固定高度div內的元素可以被擴展，即可以改變它們的高度，並且如果擴展之後它們不適合其內部，則它們應該與包含div重疊。

更具體的，主要的要求是：

• 的元素的數目是可變的（它們可以被添加並且被用戶移除）。

• 這些元素應該按照正常的文本流程排列在一個區域（此刻爲div）內，即在一行內從左到右顯示，如果有幾行元素，則從頂部顯示到底部。元素的寬度不固定，它們通常具有不同的寬度。

• 包含的div通常必須具有固定的高度，只顯示一行元素，但可以由用戶擴展爲「全尺寸」以顯示所有元素。

• 元素本身可以有變化的高度。其中一些可以自己擴展，例如他們有下拉菜單。但是，當元素展開時，包含div的高度不應改變。當這樣的下拉菜單被打開時，如果需要，該菜單應該與div重疊。元素也可以表示樹結構，可以由用戶擴展，並且應該與div重疊。

• 進一步的要求是，元素應該在div內使用拖拽& drop（我爲此使用JQuery Sortable），並且也可以移動（拖拽）出div或從某處移動（drop）其他人進入div（目前也使用JQuery）。

我無法實現重疊功能。這種問題的典型答案似乎是，絕對定位應該用於元素。但在我的情況下，這似乎不可行，因爲我需要通常的文本流程，並且使用絕對定位來實現此流程將花費太多精力。有人有關於如何實現這些要求的想法嗎？

對不起，我沒有特定的代碼來顯示，但完整的代碼已經非常複雜，並且將不在此處顯示。如果需要的話，我可以嘗試實施一個簡化的例子，但我希望有人能夠爲一般問題提供幫助。

Answer 1

這裏是你的問題的變通方法

http://jsfiddle.net/Q8dgr/1/

HTML：

<div class="container"> 
    <span class="item">very long item</span> 
    <span class="item">very long item</span> 
    <span class="item">very long item</span> 
    <span class="item">very long item</span> 
    <span class="item">very long item</span> 
    <span class="item">very long item</span> 
    <span class="item">very long item</span> 
    <span class="item">very long item</span> 
    <span class="item">very long item</span> 
    <div style="clear:both;"></div> 
</div> 

CSS

.container{ 
    background-color:red; /* to show the container's boundary */ 
    font-size:12px; 
} 

.container span{ 
    position:relative; /* vital for setting the z-index item */ 
    float:left; 
    display:block;  /* otherwise, margin will be ignored */ 
    padding:1em;   /* just for creating some space between items */ 
} 

JS（jQuery的）

$(window).ready(function(){ 
    var expansion_amount = 100; //expansion amount in pixels 

    $('.item').hover(
     function(){ 
      //mouse on 
      $(this).css({ 
       'background-color':'green', 
       'z-index':'100', 
       'height':$(this).height() + expansion_amount + 'px', 
       'margin-bottom': -expansion_amount + 'px' 
      }); 
     }, 
     function(){ 
      //mouse off 
      $(this).removeAttr('style'); 
     } 
    ); 
}); 

此處的關鍵功能是使用負邊距值。儘管物品的高度或寬度都會增長，但它必須在該方向上獲得相同的負邊距。

此代碼也可以用純CSS編寫，但它需要了解當前項目的高度或使用css3 calc。