Jquery 未知CSS问题-Divs赢得'；t堆栈和I'；我完全不明白为什么会这样

这是小提琴的例子-

我打算让紫色的对象放在黄色的框中（有效地覆盖它），而jqueryui按钮则漂浮在我制作的整个“窗口”的顶部。菜单选项卡和按钮应浮动在对象上

相反，我甚至在将div堆叠起来时都遇到了问题。黑色是主要的，物体被推到外面

<div id='main'>
    <div id='foo' class='abox'>
        <div class='boxholder'>
            <div class='menutab' onClick='menutog(this)'></div>
            <div class='buttons'>
                <label for='drag'>Drag</label>
                <input id='drag' type='checkbox'></input>
                <label for='size'>Size</label>
                <input id='size' type='checkbox'></input>
                <label for='chat'>Chat</label>
                <input id='chat' type='checkbox'></input>
                <label for='close'>Close</label>
                <input id='close' type='checkbox'></input>
            </div>
            <object class='ttvvideo'></object>
        </div>
    </div>
</div>

#main {
    width: 100%;
    height: 100%;
    background-color: black;
}
.abox {
    width: 320px;
    height: 178px;
    background-color: red;
    display: inline-block;
}
.boxholder {
    width: 100%;
    height: 100%;
    background-color: yellow;
}
.menutab {
    float: left;
    top: 0;
    left: 0;
    width: 10px;
    height: 21px;
    background-color: #6441a5;
    z-index: 2;
}
.buttons {
    font-size: .55em;
    margin-left: 27px;
}
.ttvvideo {
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: purple;
}

拖曳
大小
聊天
接近
#主要{
宽度：100%；
身高：100%；
背景色：黑色；
}
艾博克斯先生{
宽度：320px；
高度：178px；
背景色：红色；
显示：内联块；
}
.行李架{
宽度：100%；
身高：100%；
背景颜色：黄色；
}
梅努塔布先生{
浮动：左；
排名：0；
左：0；
宽度：10px；
高度：21px；
背景色：#6441a5；
z指数：2；
}
.按钮{
字体大小：.55em；
左边距：27px；
}
.ttvvideo{
顶部：0px；
宽度：100%；
身高：100%；
背景颜色：紫色；
}

我相信这就是您要找的。将

位置：绝对
添加到
按钮和
菜单选项卡
将
放入按钮
div

 <div class='buttons'>
                <label for='drag'>Drag</label>
                <input id='drag' type='checkbox'></input>
                <label for='size'>Size</label>
                <input id='size' type='checkbox'></input>
                <label for='chat'>Chat</label>
                <input id='chat' type='checkbox'></input>
                <label for='close'>Close</label>
                <input id='close' type='checkbox'></input>
                <object class='ttvvideo'></object>
 </div>


拖曳
大小
聊天
接近

这里是
顶部
，
左侧
，
右侧
，
底部
，&
z-index
。因此，设置
位置：绝对.ttvvideo
，
.menutab
，&
.buttons
上进行编码，并给
.buttons
一个高的“z”索引，并将其置于一切之上

.menutab {
    float: left;
    position:absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 21px;
    background-color: #6441a5;
    z-index: 2;
}
.buttons {
    font-size: .55em;
    margin-left: 27px;
    position:absolute;
    z-index:50;
}
.ttvvideo {
    position:absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: purple;
}

我觉得.button（）和/或.buttonset（）是罪魁祸首。我盯着这个看太久了，没什么用了。请救救我。将
位置：绝对
添加到
.ttvvideo
。您还需要更改
的顺序，以便它显示在菜单后面。（）为什么
.ttvvideo{position:absolute}
？@ShadowCat7 Fair point，这是没有必要的，因为其他两个元素上的
position:absolute
强制
。ttvvideo
无论如何都要放在顶部（技术上也不需要
顶部：0px
），我这样做是为了让所有元素都放好位置。未来开发更容易，这取决于网站的进展情况。