0

重複の可能性:
Css z-index の問題

ボタンの後ろに境界線を表示する方法はありますか? z-index:;この状況では機能していないようです。 JSフィドル

HTML:

<div class="scheduleArea">
   <button class="button"></button>     
</div>
 <nav class="nav">
    <ul>
        <li><a href="#">Send Now</a></li>
        <li><a href="#">Edit Message</a></li>
    </ul>
</nav>  
</div>

CSS:

.scheduleArea{
    width:100px;
    height:100px;
    float:right;
    margin:-15px 0 0 0;
    border:1px solid red;
}
.scheduleArea .button{
    width:100px;
    height:28px;
    background:url('../images/schedule.png') no-repeat center center;
    border:none;
    margin:0 auto;
}
.nav{
    float:right;
    height:57px;
    width:168px;
    margin:10px -100px 0 0;
    border-radius:3px;
    border:3px solid #B5B5B5;
    z-index:-20;
}
4

2 に答える 2

2

z-index は、position:relative または position:absolute がないと機能しません。

解決策: http://jsfiddle.net/k7htb/1/

編集：

.nav{
    float:right;
    height:57px;
    width:168px;
    margin:10px -100px 0 0;
    border-radius:3px;
    border:3px solid #B5B5B5;
    z-index:-20;
    position:relative; /* This line is added */
}​
于 2012-06-01T08:19:41.610 に答える
1

z-index配置された要素でのみ機能します。and に追加position:relativeする.scheduleAreaと、.navうまくいくはずです。

于 2012-06-01T08:20:11.230 に答える