我想在bxslider顶部放置一个导航div层。 我使用负值和z-index:9999来完成通常的margin-top技巧,以将导航保持在滑块的顶部,但仍会在滑块下方消失。 有什么方法可以将其放置在顶部吗?

这是我现有的CSS代码:

    .navigation {
    width:100%;
    margin-left:26px;
    margin-top:-75px;
    z-index:9999;
}
.navigationTab {
    background-color:#efefef;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    display:inline-block;   
    padding-left:3px;
    font-size:10px;
    color:#212121;
    text-transform:uppercase;
    height:31px;
    line-height:31px;
    z-index:9999;
}

.navigationTabRight {
    background:url(images/tabRight.png) no-repeat bottom;
    width:20px;
    display:inline-block;
    margin-right:8px;
    margin-left:-5px;   
    height:26px;
    z-index:9999;
}

和HTML:

<div class="slider">
            <ul class="bxslider">
                <li><img src="images/HomeBanners/1.jpg" /></li>
                <li><img src="images/HomeBanners/2.jpg" /></li>
            </ul>
        </div>
        <div class="navigation">
            <div class="navigationTab">Home</div> <div class="navigationTabRight">&nbsp;</div>
        </div>

===============>>#1 票数:2 已采纳

如果没有定位元素(默认值除外),则不能使用z-index ,因此只需添加position: relative; 启用z-index,您应该会看到预期的结果。 现在,您的所有元素均未定位,因此z-index无法正常工作。

http://www.w3.org/TR/CSS2/visuren.html#z-index

===============>>#2 票数:0

.slider {
    position:relative;
    z-index:1;   
} 

.navigation {
    position: relative;   
    width:100%;
    margin-left:26px;
    margin-top:-75px;
    z-index:9999;
}

.navigationTab {
    background-color:#efefef;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    display:inline-block;   
    padding-left:3px;
    font-size:10px;
    color:#212121;
    text-transform:uppercase;
    height:31px;
    line-height:31px;
    z-index:9999;
}


.navigationTabRight {
    background:url(images/tabRight.png) no-repeat bottom;
    width:20px;
    display:inline-block;
    margin-right:8px;
    margin-left:-5px;   
    height:26px;
    z-index:9999;
}

优良作法是使用<li><nav>标记创建菜单或导航。 工作代码演示在这里: http : //jsfiddle.net/B3jZ5/1/

===============>>#3 票数:0

为导航中的所有元素设置z-index将对其进行修复

.navigation * {
    z-index:9999;
}

  ask by Web Develop Wolf translate from so

未解决问题?本站智能推荐:

关注微信公众号