Question

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

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

编辑：

这是一个带有core-scaffold内部元素的codepen。请注意，此笔中的红色div具有位置：固定，如下面的代码所述。

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之外，它会做出预期的事情，并坚持到窗口的底部。如果我把它放在核心支架内，它就不会。

Answer 1

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

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

我试图更好地了解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>

希望有帮助（我未来的自我）。抱歉，如果我不能更具体地介绍聚合物和核心支架。我真的不明白为什么Web组件如此利基，而React却无处不在事实上是一种新的Web标准。

应该如何定位：修复阴影DOM根目录？

1 个答案: