Jquery拖出标签内容

Question

想法

我正在尝试构建触摸屏电视遥控器的原型。我正在使用Jquery和JqueryUI。

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

我试图绘制我想要构建的内容。

所有已关闭的标签

拖动以打开

第一个标签打开

I also have a jsfiddle of my current attempt

以下是标签内容

<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>

这是CSS

.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;
}

问题

我似乎无法将标签内容放在彼此之上。然后我尝试将标签标题逐渐放在平板电脑的下方，如图所示。我的JSFiddle在关闭时看起来是正确的，因为标签内容不是彼此重叠。

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

谢谢！