Question

我正在设计一个网站，我希望在其中有一个toolbar在顶部，无论滚动如何动作，toolbar 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中的小型演示很酷。

Answer 1

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

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

Answer 2

#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/

Answer 3

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

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


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

Answer 4

HTML：

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

CSS：

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

排名fixed很重要。

html固定div与其他div重叠

4 个答案: