Question

嗨我在一个表格单元格中有两个div（制作一个时间轴），我需要它们重叠而不是相互之间。

单元格内所有DIV的position属性必须保持不变（因为我使用的拖放JQUERY插件）

       <tr style="border:1px; height:30px;">
        <td style="border:1px solid black; position:static">
            <div  style="margin-left:0;width:50px;display:inline;position:relative">
                <div style="background-color: green; position:absolute">
                    Div1
                </div>
            </div>
            <div style="margin-left:0px;width:20px;display: inline; position:relative">
                <div style="background-color: red; position:absolute">
                Div2
                </div>
            </div>
        </td>
        <td>
        </td>
    </tr>

我需要两个DIV从细胞边缘开始相关。

由于

Answer 1

据我所知，只需要将红色<div>向下推。而且，由于您已经绝对定位，因此可以使用top轻松完成：

<div style="background-color: red; position:absolute; top:10px;">

检查jsFiddle上的this update

Answer 2

它们将像这样堆叠，您还应该能够浮动div并显式设置z-index以堆叠它们。

http://jsfiddle.net/ianfc89/JDff9/13/

HTML

<body onload="REDIPS.drag.init()">
<script>
    REDIPS.drag.dropMode = 'multiple';
</script>
<div id="drag" class="containDiv">
    <table class="tableWhole">
        <tbody>
            <tr>
                <td class="tableCell">
                    <div style="position:relative">
                    <div id="A125_Contain" class="drag progressContainer" >
                        <div id="A125" style="cursor: move; background-color: red; width: 500px; height: 20px; ">A125</div>
                    </div>
                    <div id="B125_Contain" class="drag progressContainer" >
                        <div id="B125" style="cursor: move; background-color: green; width: 100px; height: 20px;  ">A125</div>
                    </div>
                        <div>
                </td>
                <td class="tableCell"></td>
                <td class="tableCell"></td>
                <td class="tableCell"></td>
                <td class="tableCell"></td>
                <td class="tableCell"></td>
            </tr>
            <tbody>
    </table>
</div>

样式

.containDiv {
}
.tableWhole {
    width:1000px;
    table-layout:fixed;
}
.tableCell {
    width:300px;
    height:60px;
    border:1px solid black;
}

.progressContainer
{
 display:inline; border-bottom-style: none; position: relative; top: 0px; left:              0px; width: 100px; height: 20px;
}

水平重叠两个DIVS

2 个答案: