我有一个元素,我试图将它放在另一个元素之上:
<div id="foo1"></div>
<div id="foo2"></div>
这个CSS:
#foo1 {
width: 600px;
height: 300px;
margin: 0;
}
#foo2 {
width: 600px;
height: 300px;
margin-top: -300px;
}
但现在#foo2
正在往下走#foo1
。我将如何解决这个问题?
我有一个元素,我试图将它放在另一个元素之上:
<div id="foo1"></div>
<div id="foo2"></div>
这个CSS:
#foo1 {
width: 600px;
height: 300px;
margin: 0;
}
#foo2 {
width: 600px;
height: 300px;
margin-top: -300px;
}
但现在#foo2
正在往下走#foo1
。我将如何解决这个问题?
使它们成为绝对而不是相对就可以了。
#foo1 {
width: 600px;
height: 300px;
margin: 0;
position:absolute;
z-index:100;
}
#foo2 {
width: 600px;
height: 300px;
margin-top: -300px;
position:absolute;
z-index:1000;
}
只需添加位置:相对;到每种样式,如此处所述:http: //www.w3schools.com/cssref/pr_pos_z-index.asp
(它们都可以有相对定位)
你可以通过定位来做到这一点
#foo1 {
width: 600px;
height: 300px;
background-color:red;position:relative
}
#foo2 {
width: 600px;
height: 300px;
background-color:green; position:absolute; top:0; left:0
}
您可以将一个 div 放在另一个 div 中,然后将 position: relative to parent 和 position: absolute 应用于 child。子级将出现在父级上方并与左上角对齐。