Css 具有Z指数的戏剧性

我知道这里有很多关于使用z-index的问题，大多数问题只是应用了错误的定位。就我的一生而言，尽管我经历了问答、论坛和教程，但我还是无法实现这一点。这是我的设置：

HTML:

<div class="header">
<div class="headerTop">
    <div class="headerTopLeft">
        <div class="headMid">
        <a href="index.php"><img src="images/logo.png"></a>
        </div>
    </div>
    <div class="headerTopRight">
        <div class="headMid">
        <b>Name</b>
        </div>
    </div>
</div>

<div class="headerBottom">
    <div class="headerBottomLeft">
        <div class="headMid">
        <a href="#">Link 1</a>
        </div>
    </div>
    <div class="headerBottomRight">
        <div class="headMid">
        <div id="home"><a href="#"><img src="images/home.png"></a></div>
        <div id="friends"><a href="#"><img src="images/friends.png"></a></div>
        <div id="mail"><a href="#"><img src="images/mail.png"></a></div>
        <div id="photos"><a href="#"><img src="images/photos.png"></a></div>
        </div>
    </div>
</div>

.header {
position: relative;
height: 105px;
background: repeat-x url('../images/header_bg.jpg');
width: 100%;
color: #FFF;
display: table;
}
.headerTop {
position: relative;
margin: 0 auto;
width: 960px;
height: 70px;
padding: 0 20px;
}
.headerTop > .headerTopLeft {
position: relative;
float: left;
height: 70px;
width: 400px;
display: table;
}
.headerTopRight {
position: relative;
float: right;
height: 70px;
width: 480px;
display: table;
text-align: right;
}
.headerBottom {
margin: 0 auto;
width: 960px;
height: 35px;
padding: 0 20px;
}
.headerBottom > .headerBottomLeft {
float: left;
height: 35px;
width: 400px;
display: table;
}
.headerBottom > .headerBottomRight {
float: right;
height: 35px;
width: 480px;
display: table;
text-align: right;
}
.headMid {
position: relative;
z-index: 10;
display: table-cell;
vertical-align: middle;
width: 480px;
float: right;
}
#home {
position: relative;
width: 30px;
height: 24px;
z-index: 100;
}
#friends {
position: relative;
width: 30px;
height: 24px;
z-index: 100;
}
#mail {
position: relative;
width: 30px;
height: 24px;
z-index: 100;
}
#photos {
position: relative;
width: 30px;
height: 24px;
z-index: 100;
}

很抱歉这么长时间，但我觉得最好让你看看

问题是

headerBottomRight

中的div显示在包含div的左侧的单独行上。我需要这4个div（

home

friends

mail

和

photos

）位于

headerBottomRight

分区的右侧。之所以使用z索引，是因为我想在顶部的某个位置放置小徽章。第一件事第一，请帮忙

---

*编辑：

将这些添加到您的子div中，您希望将其放在右侧：

display:block;
min-width: 30px;
width:100%;
float: right;

一个例子

#photos {
    position: relative;
    width: 30px;
    height: 24px;
    z-index: 100;
    display:block; /*added*/
    min-width: 30px; /*added*/
    width:100%; /*added*/
    float: right; /*added*/
}

为什么不起作用：因为您没有为

headMid

类的孩子提供布局，所以他们倾向于放在左边！！：）

编辑

---

要对齐同一行，请删除宽度：100%

查看小提琴，这是一个有效的示例。通过这种方式，您可以排除

z-index

而不是

position:relative

，以将其他元素放置在底部。

我尝试将上面的内容放在a中，但没有图像，我无法判断发生了什么。修复了一个粗略的问题fiddle@matt1985，四个div位于不同的行上，因为它们是块级元素，您需要浮动它们或使它们成为内联块元素。我不明白z指数是怎么来的this@pete谢谢你的内联块的想法！在答案标记为正确的情况下完美地工作：-）这确实会将它们向右浮动，但它们仍然显示在单独的行上。我希望他们都在同一条线上。