具有绝对位置的自定义元素答案

【问题标题】：Custom element with position absolute具有绝对位置的自定义元素
【发布时间】：2018-06-20 11:39:26
【问题描述】：

我试图在 Web 组件中包含/放置 fin-hypergrid，但是因为它的滚动条是自定义的 divs，上面带有 position: absolute，所以它们绝对定位于 window 而不是组件本身.

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

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

编辑：附带说明，如果有任何fin-hypergrid 正在查看，则在初始化上述 jsfiddle 时，核心的缩小版本会引发异常。 (铬 63)

【问题讨论】：

要将绝对定位元素相对定位到其包含元素，应在该包含元素上声明position: relative，例如：jsfiddle.net/50kyyfam/1
@UncaughtTypeError - 太棒了，我刚刚将 position: relative 添加到 :host 样式中，它按预期工作 - 如果您创建答案，我可以将其标记为正确
很高兴，请允许我几分钟，我会发布一个。
两张反对票...我的问题有什么问题吗？...我是否违反了某种礼仪？

标签： html css css-position custom-element fin-hypergrid

【解决方案1】：

要将一个绝对定位元素相对定位到其包含元素，应在该包含元素上声明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 属性值为 absolute（不是 fixed）相对到任何包含元素如果你声明相对定位到包含元素的那个。

【讨论】：