0

カウントダウン 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>

スタイル.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

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 に答える