Javascript Jquery拖出选项卡式内容 想法

我正在尝试建立一个触摸屏电视遥控器的原型。我将Jquery与JqueryUI一起使用

遥控器看起来像一个平板电脑。我已经用了20%的屏幕，在横向，专门的音量以及其他按钮。这些将始终可见。剩下的80%将是用户拖出查看的选项卡式部分。这些选项卡的功能类似于屏幕顶部的android快速设置菜单。我希望有至少4个标签

我试图画出我想要建造的东西

所有关闭的选项卡

拖动以打开

第一个选项卡打开

以下是选项卡式内容

<div id="main" class="main-container">
    <div id="tab1" class="tab-container" style="position:relative; left:729px;">
        <p>tab heading</p>
        <div class="tab-content">
            Tab 1
        </div>
    </div>
    <div id="tab2" class="tab-container" style="position:relative; left:729px; top:-412px;">
        <p>tab heading</p>
        <div class="tab-content">
            Tab 2
        </div>
    </div>
</div>

问题 我似乎无法将选项卡式内容放在彼此的顶部。然后，我尝试将选项卡标题逐步向下放置在平板电脑上，如图中所示。我的JSFIDLE只有在关闭时才看起来正确，因为选项卡式内容彼此不在一起

如果有人能把我推向正确的方向，我将不胜感激

---

谢谢

尝试绝对位置，这样它们会互相堆叠。我会在家时尝试，看看我能得到什么。谢谢

.tab-container {
    width:100%;
    height:100%;
}
.tab-container p{
    height:50px;
    width:10%;
    float:left;
    border: 1px solid blue;
    /*-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);*/
    cursor:pointer;
    background:beige;
}
.tab-content {
    border:1px solid purple;
    float:left;
    height:100%;
    width:85%;
    margin:0;
    background:blue;
}