Question

我有一些非常具体的元素要求（目前这些元素是跨度，但这对我的问题并不重要）必须在网页中显示。

基本问题是相对位于固定高度div内的元素可以扩展，即可以改变它们的高度，如果它们在扩展后不适合它们，它们应该与包含div重叠。 / em>

更具体地说，主要要求是：

元素的数量是可变的（可以由用户添加和删除）。

元素应根据正常文本流排列在一个区域（此刻为div）内，即在一行内从左到右显示，如果有多行元素则从上到下显示。元素的宽度不固定，它们通常具有不同的宽度。

包含div通常必须具有固定高度，仅显示一行元素，但可以由用户扩展为“完整大小”以显示所有元素。

元素本身可以有一个可变的高度。其中一些可以自己扩展，例如他们有下拉菜单。但是，当元素展开时，包含div的高度不应该改变。打开这样的下拉菜单时，如果需要，此菜单应与div重叠。元素也可以表示树结构，可以由用户扩展，并且应该与div重叠。

进一步的要求是元素应该在div内部使用drag＆amp; drop（我为此目的使用JQuery Sortable）重新排列，也可以从div移动（拖动）或移动（删除）在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。

相对定位的HTML元素与父级重叠

1 个答案: