0

希望我的倒计时 div 在 header_top div 下，我不知道为什么我的 z-index 不起作用。尝试使用位置：相对，但我想我用错了。

有人可以帮忙吗？

索引.php： 

        <div class="header_top">
                <div class="links">
                        <div class="link">
                        <img src="img/tweet.png" >
                        </div>
                        <div class="link">
                        <img src="img/face.png" >
                        </div>
                        <div class="link">
                        <img src="img/youtube.png" >
                        </div>
                        <div class="link">
                        <img src="img/streg.png" >
                        </div>
                        <div class="link">
                        <img src="img/faq.png" >
                        </div>
                        <div class="link">
                        <img src="img/message.png" >
                        </div>
                        <div class="link">
                        <img src="img/info.png" >
                        </div>
                </div>


        </div>

    <div class="countdown">
    </div>

样式.css：

.header_top {
    left:0px;
    top:0px;
    position:relative;
    z-index:2;
    width:1024px;
    height:80px;
    background-image:url(../img/top.png);
}
.links {
    position:relative;
    z-index:2;
    float:right;
    margin:10px 0px 0px 0px;
    width:350px;
    height:45px;
}
.link {
    position:relative;
    z-index:2;
    margin:3px 3px;
    display:inline-block;
    vertical-align:top;
}
.countdown {
    position:relative;
    z-index:1;
    left:0px;
    top:0px;
    background-image:url(../img/count.png);
    width:1024px;
    height:160px;
}
4

5 回答 5

1

尝试添加position: absolute;到.countdown选择器。

于 2013-10-03T17:29:31.813 回答
1

我猜您希望您的.countdowndiv 实际上位于与它相同的位置.header_top并在其下分层？如果是这样，那么您需要.header_top绝对定位：

.header_top {
    left:0px;
    top:0px;
    position:absolute; //here's the only change in your code
    z-index:2;
    width:1024px;
    height:80px;
    background-image:url(../img/top.png);
}
(...)

请注意，.header_top它将相对于它最近的父对象定位relative/ absolute/ fixed。如果没有这样的，那么.header_top的位置将相对于body。

于 2013-10-03T17:30:03.253 回答
0

相对位置可能不是您想要的。位置：元素相对于其通常位置的相对位置。所以本质上，你只是在它本来应该在的地方移动它。

另一方面，绝对位置相对于其先前的祖先位置。

http://www.w3schools.com/cssref/pr_class_position.asp

您还希望您希望出现在其他元素上方的元素具有更高的 z-index 值。

于 2013-10-03T17:44:03.263 回答
0

我在这里可能是错的，但你可能会这样做：

<div id="countdown">
<div class="header_top">
                <div class="links">
                        <div class="link">
                        <img src="img/tweet.png" >
                        </div>
                        <div class="link">
                        <img src="img/face.png" >
                        </div>
                        <div class="link">
                        <img src="img/youtube.png" >
                        </div>
                        <div class="link">
                        <img src="img/streg.png" >
                        </div>
                        <div class="link">
                        <img src="img/faq.png" >
                        </div>
                        <div class="link">
                        <img src="img/message.png" >
                        </div>
                        <div class="link">`enter code here`
                        <img src="img/info.png" >
                        </div>
                     </div>
                 </div>
             <div>

这样，您可以相应地设置倒计时样式并在其中包含其他 div。

于 2013-10-03T18:55:34.883 回答
0

z-index 是 CSS 的一个属性，允许您设置特定元素的堆栈顺序。具有较大堆栈顺序的元素将始终位于具有较低堆栈顺序的元素之前。z-index 是在 css2 中引入的，它不是继承的，它的默认值是 auto。用于设置 z-index 的 JavaScript 语法是 object.style.zIndex="1"。这些是围绕 z-index 属性的一些小技巧和知识。

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

在这个小测试中将 z-index 从 -1 更改为 1。您将看到它是如何正常工作的。您可以从他们的代码中获取并尝试解决您的问题。希望这有帮助。

问题在于您的位置设置。将其设置为相对，意味着它相对于该区域中的其他 div 是相对的并且是部分的。绝对意味着您已经确定了它的位置，无论设置为 top: 0 left: 0 和 position: absolute 的 div 的数量。

于 2013-10-03T17:34:41.467 回答