这是小提琴的示例- 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;
}