2

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

单元格内所有 DIV 的位置属性必须保持不变（因为我使用了拖放 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 从单元格的边缘开始相对。

谢谢

4

2 回答 2

2

据我所知，您只需将红色<div>向下推一点。而且由于您已将其绝对定位，因此很容易通过以下方式完成top：

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

在您的 jsFiddle 上检查此更新

于 2013-04-24T14:15:24.363 回答
0

它们将像这样堆叠，您还应该能够浮动 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;
}
于 2013-04-24T15:47:43.123 回答