定位
绝对定位
要素
相对的
到其包含元素,
position: relative
应在包含元素上声明,例如:
data-grid {
position: relative;
}
class DataGrid extends HTMLElement {
constructor() {
super();
this.createShadowRoot().innerHTML = `
<style>
:host {
display: block;
}
div {
height: 100%;
width: 100%;
}
</style>
<div></div>
`;
}
connectedCallback() {
const grid = new fin.Hypergrid(this.shadowRoot.querySelector('div'));
const data = [
{ name: 'Company 1', price: 300 },
{ name: 'Company 2', price: 200 },
{ name: 'Company 3', price: 150 },
{ name: 'Company 4', price: 500 },
{ name: 'Company 5', price: 999 }
];
grid.setData(data);
}
}
customElements.define('data-grid', DataGrid);
data-grid {
position: relative;
}
<script src="https://fin-hypergrid.github.io/core/2.0.2/build/fin-hypergrid.js"></script>
<data-grid style="width:100px; height: 150px;"></data-grid>
Updated JSFiddle
扩展
,为清晰起见,并为任何其他可能读者的潜在利益:
-
将元素声明为时
绝对定位
要素
(
absolute
或
fixed
)你是
从中删除元素
自然文档流
; 这意味着元素不再是
以某种方式与兄弟元素交互
relative
或
static
元素确实如此(假设元素“位于”DOM其余部分之上)。
-
默认情况下
绝对定位
元素的位置为
“相对”于
窗
; 这意味着如果偏移其位置
具有
left
或
right
它将移动的距离等于的属性值
属性值
从窗口
. 可以定位元素
用一个
position
的属性值
完全的
(不是
固定的
)相对的
到任何包含元素
如果将相对定位声明为
包含元素的元素
.
