jquery - 未知的 CSS 问题 - div 不会堆叠，我已经完全不知道为什么会这样

Question

这是小提琴的示例- http://jsfiddle.net/k3bmN/3/

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

相反，我什至遇到了让 div 堆叠的问题。黑色是#main，物体被推到外面

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

Answer 1

我相信这个 jsFiddle就是你要找的。添加position: absolute到.buttons和.menutab。

Answer 2

把你<object class='ttvvideo'></object>的按钮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>

这是小提琴

Answer 3

top, left, right, bottom, &z-index 对非定位元素没有影响（链接 Mozilla Developer for top）。所以，设置position:absolute;, .ttvvideo, .menutab&.buttons并给出.buttons一个高的 `z-index 以将它推到一切之上。

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

http://jsfiddle.net/daCrosby/k3bmN/7/