如何控制css中固定元素的位置

Question

我有两个div，我将其称为div1和div2，如此屏幕截图所示：

这两个div都是position:fixed。

我想将div 2叠加在div 1的顶部。我认为z-index可以解决这个问题，但我无法让它工作。

Here is my fiddle

#one {
    height: 166px;
    right: 0;
    background:red;
    position: fixed;
    width: 200px;
}
#two {
    position:fixed;
    margin-left: 250px;
    width: 215px;
    background:blue;
    height: 220px;
    top: 50px;
}

<div id="one"></div>
<div id="two"></div>

注意：我的div 2在html文档中首先出现

Answer 1

您甚至不需要使用z-index，只需将div#two放在标记之前div#one。这自然地将两个div正确地分层。

Your fiddle changed

请注意，如果您想使用CSS定位ID，则ID不能以数字开头。

CSS / HTML / Demo

#two {
    position:fixed;
    margin-left: 250px;
    width: 215px;
    background:blue;
    height: 220px;
}
#one {
    height: 166px;
    right: 0;
    background:red;
    position: fixed;
    width: 200px;
}

<div id="two"></div>
<div id="one"></div>