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

top、left、right、bottom&z-index は、配置されていない要素には影響しません (リンク Mozilla Developer for top)。したがって、, , &を設定position:absolute;し、高い `z-index も指定して、すべての上にプッシュします。.ttvvideo.menutab.buttons.buttons

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