In SpreadJS, you can add a floating object to the JavaScript spreadsheet, and it is displayed on the top of the cells. The below workbook shows a standard floating object and a picture in a sheet.

There are two kinds of floating objects: FloatingObject and Picture. FloatingObject: Exposes a content property so that the user can customize the HTMLElement content. Picture: Exposes some basic picture properties that provide a basic Picture function similar to the Excel Picture feature. To add a FloatingObject to the sheet, you need to create a FloatingObject object and use the add method to add it to the sheet. For example: After you add the custom floating object, you might want to work with it. Use the get method to get it by name, or use the all method to get all the FloatingObject objects. When you do not need it, you can use the remove method to remove it by name. If you want to add a Picture to the sheet, you can use the add method. For example: After you add the picture, you might want to work with it. Use the get method to get it by name or use the all method to get all the Picture objects. When you do not need it, you can use the remove method to remove it by name. Both FloatingObject and Picture are floating objects. They are floated on the top of cells, but if there is a floating object that is on top of another one, you might want to put the lower one on top of the upper one. Use the zIndex method to set the z-index of the floating object. For example:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); }; function initSpread(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); sheet.suspendPaint(); var customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f0"); customFloatingObject.startRow(1); customFloatingObject.startColumn(1); customFloatingObject.endColumn(6); customFloatingObject.endRow(6); var div = document.createElement('div'); div.innerHTML = "<span>SpreadJS supports FloatingObject.</span><div style='border: 1px dotted red; width: 80%; margin:auto;'><ul><li>I am list one.</li><li>I am list two.</li><li>I am list three.</li></ul></div>"; div.style.background = 'gray'; customFloatingObject.content(div); sheet.floatingObjects.add(customFloatingObject); sheet.pictures.add("f2", "$DEMOROOT$/spread/source/images/splogo.png", 62, 140, 180, 200); sheet.resumePaint(); };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%; height:100%;"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }