html fixed div被其他div覆盖

我正在设计一个网站，其中顶部有一个toolbar，无论滚动如何，toolbar div始终位于顶部。这是我到目前为止有：html fixed div被其他div覆盖

<div class="stuckpart"> 
    <button type="button">this button is fixed</button> 
</div> 
<div id="table_div"></div>

我使用google table JS库到table_div中附上一个表，但是当我向下滚动表时，button在顶部被重叠桌子。如何解决这个问题？

更具体一点：我想要的就是这个w3school做的，他们总是在顶部有一个工具栏。

我该如何实现这样的东西？在jsfiddle的小演示会很酷。

来源

2015-11-06 byteBiter

'位置：固定;'是关键 – holden

你还没有画出一幅非常清晰的图画。看看这个小提琴，让我知道这是你在找什么？ http://jsfiddle.net/AKL35/958/ – Jase

不要求在jsfiddle上的代码 - 代码应该在答案 - 你的代码也应该在问题中... – Soren

.stuckpart{ 
     position:fixed; 
     padding-bottom: 200px; 
     z-index:100 
    }

的z-index将解决您的重叠问题。

来源

2015-11-06 21:21:56

虽然你吸... – byteBiter

这会将您的导航栏移动到页面的顶部，并在滚动页面时将其保留在那里。

<body> 
    <div id='nav_bar'> 
    </div> 
</body> 


#nav_bar { 
    position: fixed; 
    top: 0px; 
    //the rest of your nav bar style 
}

来源

2015-11-06 20:15:57

HTML：

<div class="menu"></div>

CSS：

.menu { 
    background-color: #000000; 
    width: 500px; 
    height: 50px; 
    position: fixed; 
    margin-top: 0px; 
}

位置fixed是很重要的。

来源

2015-11-06 20:18:39 wall3r

固定元素的margin-top不重要... – CroaToa

#nav_bar { 
    position: fixed; 
    background-color:blue; 
    height:50px; 
    width:100% 
    } 
#content { 
    background-color:lightgreen; 
    overflow-y:auto; 
    height:200px; 
    position:relative; 
    width:100%; 
    top:50px; 
}

http://jsfiddle.net/oa7mfcmb/6/

来源

2015-11-06 20:23:21 holden

它看起来不错，但请参阅这个http://jsfiddle.net/RjHMH/85/，你怎么解决这个问题？ – byteBiter

看起来不错，你可以upvote我的问题？ – byteBiter

html fixed div被其他div覆盖

回答

相关问题