Question

我知道这里有很多关于使用z-index的问题，而且他们中的大多数都只是应用了错误的定位。对于我的生活，尽管通过Q＆amp; As，论坛和教程，我仍然无法实现这一点。这是我的设置：

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>

CSS：

.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 div的右侧。 z-index的原因是因为我想在某些时候将小徽章放在顶部。首先，请帮忙！

* 编辑：* http://jsfiddle.net/zBZ3j/

Answer 1

将这些添加到你想要的孩子div中：

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

demo here

一个例子

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

为什么它不起作用因为你没有提供headMid课程的孩子的布局，所以他们往往会占据左边的位置！：）

修改

要在同一行中对齐，请移除width:100% see demo here

Answer 2

看着小提琴，here就是一个有效的例子。这样，您可以排除z-index代替position: relative以将其他元素放在底部。

有Z-Index的戏剧

2 个答案: