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

Question

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

pfo*_*oti 6 css shadow-dom polymer

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

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

编辑：

这是一个 codepen，其元素位于核心支架内。请注意，这支笔中的红色 div 的位置：固定，如下面我的代码中所述。

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

这是一个 codepen，其元素位于核心支架之外。这是我想要的行为，但 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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Ana*_*lop 9

这可能不是您问题的答案。但我在 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>

Run Code Online (Sandbox Code Playgroud)

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

这是什么妖术？ (2认同)
这里描述了它工作的原因https://developer.mozilla.org/en-US/docs/Web/CSS/position#values:~:text=It%20is%20positioned%20relative%20to%20the%20initial% 20包含%20block%20建立%20by%20the%20viewport%2C%20 except%20when%20one%20of%20its%20ancestors%20has%20a%20transform%2C%20perspective%2C%20or%20filter%20property%20set%20to%20something% 20其他%20比%20无 (2认同)

Answer 2

Mar*_*son 0

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

从来源“ https://s.codepen.io ”访问“ https://www.polymer-project.org/0.5/components/core-scaffold/core-scaffold.html ”处导入的资源已被 CORS 阻止策略：请求的资源上不存在“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);
})();

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	10 年，6 月前
查看次数：	5959 次
最近记录：	3 年，11 月前