位置绝对

Question

我正在尝试在网络组件中包含/放置fin-hypergrid，但由于它的滚动条是自定义的div，其上有position: absolute，因此它们位于{{{ 1}}而不是组件本身。

这是我的jsfiddle：https://jsfiddle.net/50kyyfam/

我几乎可以肯定我需要在window样式中添加一个css属性来告诉网格绝对位于:host组件的边界，但我不知道它是什么应该是吗？

编辑：作为旁注，如果data-grid中的任何一个正在查找，则在初始化上述jsfiddle时，核心的缩小版本会引发异常。 （Chrome 63）

Answer 1

要将绝对定位的元素 relative 定位到其包含的元素，应在该包含元素上声明//create the schema only the first time of course OClass class = db.getMetadata().getSchema().createClass("Image"); class.createProperty("binary", OType.BINARY); // if you want it schemaful ODocument doc = db.newInstance("Image") doc.field("binary", "Binary data".getBytes()); doc.save(); ，例如：

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;
}

Updated JSFiddle

扩展，为了清晰起见以及任何其他可能的读者的潜在利益：

• 将元素声明为绝对定位的元素时 （<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>或absolute）您正在从中移除元素 自然文件流;这只是意味着元素不再存在 以fixed或relative的方式与兄弟元素互动 元素做（想象元素“在DOM的其余部分之上选址”。
• 默认情况下，绝对定位的元素的位置是 “相对”窗口;这意味着如果你抵消它的位置 使用static或left属性值，它将移动等于的距离 窗口中的属性值 。您可以定位元素 right属性值position（不是absolute）相对的。{ 如果声明相对定位，则为任何包含元素 包含元素。