position: fixed 应该如何在影子 DOM 根中工作？答案

【问题标题】：how should position: fixed work in a shadow DOM root?position: fixed 应该如何在影子 DOM 根中工作？
【发布时间】：2015-07-28 01:56:08
【问题描述】：

我有一个带有position: fixed 的 div，假设它应该附加到视口的底部而不是滚动，至少根据MDN。

相反，我得到的是一个 div，它停留在其初始位置（呈现页面时视口的底部），但随后使用 shadow-dom 滚动条上下滚动。

编辑：

这是一个带有核心支架内元素的代码笔。请注意，这支笔中的红色 div 具有 position: fixed ，如下面的代码所述。

http://codepen.io/ericeslinger/pen/bdedgp

这是一个带有核心支架外元素的代码笔。这是我想要的行为，但 div 在结构上位于核心脚手架内（出于角度范围的原因）。

http://codepen.io/ericeslinger/pen/jPrPyy

FWIW，我使用的是聚合物 0.5。这是我正在运行的草图：

<head>
<style type="text/css">
.testClass {
  position: fixed;
  z-index: 1000;
  bottom: 0;
  left: 0px;
  right: 0px;
  height: 150px;
  background-color: red;
}
</style>
</head>
<body unresolved>
<core-scaffold>
  <div main vertical layout>
    <span>woo</span>
    <div class="testClass">This is some stuff at the bottom</div>
    <div style="min-height: 2000px" flex></div>
  </div>
</core-scaffold>

如果我将 testClass div 移到 core-scaffold 之外，它会执行预期的操作并粘在窗口底部。如果我把它放在核心支架内，它不会。

【问题讨论】：

你能做个小提琴吗？
不幸的是，我不这么认为 - 我没有看到任何有效的聚合物小提琴、plunk、codepens 或你有什么：显然，他们在 CORS 和 CDN 方面存在问题。我会看看我能挖出什么。
啊哈，我在 codepen 上发现了。似乎有效，或者至少对我有效。

标签： css polymer shadow-dom

【解决方案1】：

这可能不是您问题的答案。但是我在 Shadow DOM 中的固定位置也遇到了类似的问题。我希望所有元素都在其父 div 内，但位置固定的元素相对于浏览器视口定位。我的解决方案是添加一个虚拟变换属性，以便所有具有固定位置的元素都附加到它们的父 div。

#shadow-root (open)
<div style="transform: scale(1);">
 /* my shadow root content here */
 <div style="position: fixed; top: 0; left: 0">this is now relative to parent div</div>
</div>

供参考https://developer.mozilla.org/en-US/docs/Web/CSS/position#values

【讨论】：

【解决方案2】：

原始问题中的 codepen 链接不起作用：

CORS 策略已阻止从源“https://s.codepen.io”访问“https://www.polymer-project.org/0.5/components/core-scaffold/core-scaffold.html”处的导入资源：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我试图更好地了解position:fixed 和Shadow DOM。我希望position:fixed 将在Shadow DOM 边界内，而不是视口。这是我想出的一个演示：

(function() {
	const template = document.createElement('template');

	template.innerHTML = `
	<style>
	  :host {
				display: block;
	    background: red;
	  }
	</style>

	<div>
			<slot name="top"></slot>
			<hr>
			<slot name="bottom"></slot>
		</div>
	`;

	class MyInfoBox extends HTMLElement {
	constructor() {
	  super();

	  this.attachShadow({ mode: 'open' });
	  this.shadowRoot.appendChild(template.content.cloneNode(true));
	}
	}

	window.customElements.define('my-info-box', MyInfoBox);
})();

<br>
<br>
<br>
<br>
<br>
<br>

<my-info-box>
	<span slot="top">TOP</span>
	<span slot="bottom">
		<div style="position: fixed; top: 0; left: 0">BOTTOM</div>
	</span>
</my-info-box>

希望对我有所帮助（我未来的自己）。抱歉，如果我不能更具体地了解 Polymer 和 core-scaffold。我真的不明白为什么 Web 组件如此小众，而 React 无处不在，事实上是一种新的 Web 标准。

【讨论】：

感谢您的回复，但我问的是四年前的问题。聚合物 0.5 的上下文已经过时了，这可能就是它无法加载的原因。
你是 100% 的，没有必要提一个不起作用的东西。答案主要是为了我和我未来的自己，因为我正试图让 Shadow DOM 工作:)