2

こんにちは、テーブル セル内に 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

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 に答える