SpreadJS 支持两种类型的浮动对象元素： 自定制浮动对象元素和图片。
FloatingObject: 提供一个 content 属性，以便使是用户可以自定义 HTMLElement 的内容。
Picture: 提供类似Excel的基本的图片属性和函数。
如果要添加一个自定制浮动对象元素到表单， 你需要创建一个 FloatingObject 实例并使用 add 方法来将它添加到表单。例如：
在自定制浮动对象元素添加完毕后，可以使用 get 方法来获取指定名字的浮动对象元素，或者使用 all 方法来获取表单上所有的浮动对象元素。 你也可以使用 remove 方法来移除对应名称的浮动对象元素。
如果你想添加图片到表单， 你可以使用 add 方法来添加图片到表单，例如：
在你添加图片后, 你可以使用 get 方法来获取指定名字的图片或者使用 all 方法来获取表单上所有的表单。 你也可以使用 remove 方法来移除指定名字的图片。
自定制浮动对象元素和图片都是浮动对象元素， 它们都覆盖在单元格上，但是如果浮动对象元素之间相互重叠，你需要使用 zIndex 方法来设置浮动对象元素的重叠关系。例如：
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.suspendPaint();
var customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f1",10, 10, 60, 64);
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 gray; width: 60%; height:70%; margin:auto;'><ul><li>First list</li></ul><ul><li>Second list</li></ul></div>";
div.style.background = 'LightGray';
customFloatingObject.content(div);
sheet.floatingObjects.add(customFloatingObject);
sheet.resumePaint();
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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;
}
