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:relative上使用z-index:10和#b，即可。

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

Answer 2

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

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

Answer 3

很简单，您可以将位置和 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/

CSS：如何将对象移动一层？

3 个答案: