Question

希望我的倒计时div位于header_top div之下，我无法弄清楚为什么我的z-index不起作用。尝试使用position：relative，但我想我错了。

有人可以帮忙吗？

的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>

styles.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;
}

Answer 1

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

Answer 2

我想您希望.countdown div与.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。

Answer 3

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的相对和部分。绝对意味着你已经确定了它的位置，无论div的数量设置为top：0 left：0 with position：absolute。

Answer 4

位置相对可能不是你想要的。位置：一个元素相对于其位置通常的位置的相对位置。所以从本质上讲，你只是把它带到原处并移动它。

相对于其先前的祖先而言绝对位于另一方面。

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

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

Answer 5

我可能在这里错了，但你可以做到：

<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。

无法弄清z-index

5 个答案: