position: fixed 应该如何在影子 DOM 根中工作？
Posted
技术标签:
【中文标题】position: fixed 应该如何在影子 DOM 根中工作？【英文标题】：how should position: fixed work in a shadow DOM root? 【发布时间】：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 上发现了。似乎有效，或者至少对我有效。 【参考方案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 工作:)以上是关于position: fixed 应该如何在影子 DOM 根中工作？的主要内容，如果未能解决你的问题，请参考以下文章
CSS position:fixed 实现html元素固定于某位置
在 HTML 页面中获取所有带有 `position:fixed` 的元素？
如何改变一个已经把position fixed了的div位置