使用默认位置将前一个（第一个定义的）div放在下一个（第二个）div的前面

Question

我有2 div s并希望第一个定义的div（称为befront）位于此后定义的div的前面（称为beback position: absolute;）。

使用z-index会破坏设计，因此我只想使用无效的#befront { width:100%; height:20px; background:red; /* I expect that the rex box be in front of the yellow box*/ margin-bottom:-20px; z-index: 1000; } #beback { width:100%; height:20px; background:yellow;z-index:1; } 。

我使用了以下CSS，但没有运气：

{{1}}

jsfiddle is here

Answer 1

你能不能只添加“position：relative;”到你的“#befront”？

#befront {
width:100%; height:20px; background:red;
/* I expect that the rex box be in front of the yellow box*/
margin-bottom:-20px;
z-index: 1000;
position: relative;
}
#beback {
width:100%; height:20px; background:yellow;z-index:1;
}

z-index要求定位元素才能正常工作。

请参阅here

Answer 2

尝试将z-index #beback设为负值。将其更改为-1或更低。 并添加positon，其价值为absolute或relative