css“固定”子元素相对于父元素而不是视口的位置，为什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21091958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css "fixed" child element positions relative to parent element not to the viewport, why?
提问by R4ttlesnake
I'm developing a wordpress theme, with an isotope grid and where a hover on a post should display its title with a fixed position on the bottom of the browser. I have this simplified structure:
我正在开发一个带有同位素网格的 wordpress 主题，悬停在帖子上的位置应该在浏览器底部的固定位置显示其标题。我有这个简化的结构：
<div id="main">
<article class="hubbub">
//article content
<h2 class="subtitled">
//h2 content
</h2>
</article>
</div>
Via jQuery, a hover on <article>should display its child element h2.subtitled. <article>is positioned relative, but gets an absolute position by the isotope script. The h2.subtitledis positioned fixed with:
通过 jQuery，悬停<article>应该显示其子元素h2.subtitled。<article>相对定位，但通过同位素脚本获得绝对位置。在h2.subtitled被定位固定：
.subtitled {
display: none;
position: fixed;
z-index: 999999999;
bottom: 20px;
left: 0;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 42px;
text-align: center;
color: yellow;
}
For some reason, the h2.subtitleelements get positioned fixed related to the parent <article>element, so an the bottom of each <article>. If I set the <h2>outside of the <article>, it is positioned fixed related to the browser, but they need to be inside of the <article>element, because an infinite scroll appends the new <article>elements and they should as well contain the <h2>titles.
出于某种原因，h2.subtitle元素的位置与父<article>元素相关，因此每个<article>. 如果我设置了 的<h2>外部<article>，它的定位与浏览器相关，但它们需要在<article>元素内部，因为无限滚动会附加新<article>元素，它们也应该包含<h2>标题。
Does anyone know, how to make this position fixed and related to the browser window?
有谁知道，如何使这个位置固定并与浏览器窗口相关？
Thanks!
谢谢！
回答by BlairHippo
FWIW, when I ran into this, the problem turned out to be a parent divwith -webkit-transform: translate3d(0, 0, 0)in its CSS. Apparently, this is a known source of potential mayhem in child elements with position: fixed.
FWIW，当我跑成这样，这个问题竟然是父母div与-webkit-transform: translate3d(0, 0, 0)在CSS。显然，这是子元素中潜在混乱的已知来源position: fixed。
For what I was trying to do (turning fixedon and off as a way of sticking a key nav element to the top of the page as it scrolled by), the solution was to appendit to the page bodyelement when it was time to hold it in place and sticking it back in its wrapper divwhen it wasn't. No idea if any of this would have helped the OP, but if you're chasing this bug yourself, worth looking into.
对于我试图做的事情（打开fixed和关闭作为一种在滚动时将关键导航元素粘贴到页面顶部的方式），解决方案是在append需要将其body保持时将其固定到页面元素中放回原处并将其粘回包装纸中div。不知道这些是否会对 OP 有所帮助，但是如果您自己在追这个错误，那么值得研究一下。
回答by Alex
Remove the transformproperty from the parent of the fixed element.
transform从固定元素的父级中删除该属性。
For some reason this causes the fixed element to become relative to the parent instead of the document.
出于某种原因，这会导致固定元素相对于父元素而不是文档。
回答by Marzieh Bahri
In my case, the parent element doesn't have a transformproperty but filter: drop-shadow(...)which caused the same problem. Removing the filter solved the problem.
在我的情况下，父元素没有transform属性但filter: drop-shadow(...)导致了同样的问题。取下过滤器解决了问题。
