css - CSS：如何将对象向上移动一层？

Question

HTML：

<div id="a">A</div>
<div id="b">B</div>

CSS：

#a {
    float: left;

    width: 30px;
    height: 30px;
    color: white;
    background-color: red;
    border: 1px solid black;
    text-align: center;
}

#b {
    margin-left: 25px;

    width: 30px;
    height: 40px;
    color: white;
    background-color: green;
    border: 1px solid black;
    text-align: center;
}

在这里查看我的代码：http: //jsfiddle.net/mxtdg/；

好像A在B之上，如果我想让B在A之上怎么办？

Answer 1

只需使用position:relativeand z-index:10on #b，就可以了。

演示：jsfiddle.net/Marcel/mxtdg/7/

Answer 2

它很简单，您可以将位置和z-index值定义为您想要在上面的任何div 或 id并记住一件事 z-index 仅在您定义您想要在上面的特定 div 或 id 的位置时才起作用。

看到你更新的代码： -

HTML

<div id="a">A</div>
<div id="b">B</div>    

CSS

#a {
    float: left;
    width: 30px;
    height: 30px;
    color: white;
    background-color: red;
    border: 1px solid black;
    text-align: center;
}

#b {
    margin-left: 25px;
    width: 30px;
    height: 40px;
    color: white;
    background-color: green;
    border: 1px solid black;
    text-align: center;
    position:relative;
    z-index:10;
}

或查看演示：- http://jsfiddle.net/mxtdg/19/

Answer 3

你也可以浮动“b”然后你使用边距来调整位置。当它们都浮动时，在这种情况下您不需要更改 z-index，由于 HTML 的顺序，“b”将位于“a”之上。

http://jsfiddle.net/mxtdg/12/