1. 程式人生 > >HTML 固定div於頁面固定位置,實現懸浮按鈕。

HTML 固定div於頁面固定位置,實現懸浮按鈕。

一個小需求,頁面過長,業務希望將按鈕懸浮於頁面上,不要一下拉就蓋掉操作按鈕。

程式碼如下:

<div id="dg" style="z-index: 9999; position: fixed ! important; right: 0px; top: 0px;">
<table width=""100% style="position: absolute; width:260px; right: 0px; top: 0px;">
//table 內部控制元件程式碼
</table>
</div>

div position引數設定為fixed 其相對於瀏覽器為絕對位置,通過設定right和top將div固定在右上角。

table position引數設定為absolute,其相對於第一層div絕對定位,通過設定right和top將table固定在div容器的右上角。