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覆蓋

回答

相關問題