flexbox 子项是否“定位”以便它们可以用来绝对定位他们的子项？

Question

我正在为我的网站创建一个标题，其中包含一个标题、导航链接列表和一个搜索表单。整个页面使用 flexbox 设置，因此：

HTML：

 <div id="pagecontainer"> <!--the flex container-->
    <header id="pageheader"><!--the header--><h1>...</h1><!--the heading-->
       <nav><ul>...</ul></nav><!--the navigation-->
       <form>...</form><!--the search--></header>
    <main id="pagemain>...</main><!--the main content area-->
    <footer id="pagemain>...</footer><!--the footer-->
 </div>

CSS

 #pagecontainer {
    display:flex;
    flex-direction:column;
    min-height:100VH;
 }
 #pageheader {
    position:sticky;
    top:0PX;
    ...
 }
 #pagemain {
    flex:1;
    ...
 }
 #pagefooter {
    ...
 }
 #pageheader form {
    position:absolute;
    right:0;
    bottom:0;
    ...
 }

我遇到的问题是，在 Firefox 中，搜索字段的位置正确——在标题的右下角——但在 Chrome（和其他 Webkit 浏览器中）它位于右下角页。 根据 MDN 关于位置的文章 (https://developer.mozilla.org/en-US/docs/Web/CSS/position)，绝对定位的元素是  “相对于最近的定位祖先定位。如果定位的祖先不存在，则使用初始容器。” 很明显，Firefox 将 flex-positioned 元素视为已定位，但 Webkit 将它们视为正常流程。哪种行为是“正确的”？是否有一些我可以使用的后备？

谢谢， 汤姆

Answer 1

我不知道 Chrome 的行为是否正确，但 Firefox 肯定是按照旧版本的规范进行编码的（并且关于弹性框内绝对定位的规范文本已经更改了好几次）。

更新 firefox 行为的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=874718

与此同时，我建议不要依赖 Firefox 当前关于 flex 容器内绝对定位的东西的行为（除非它们在它们和容器之间有一个 position:relative 祖先 - 见下文）。

回答您的其他问题：

• 不，弹性项目不被视为“定位”（并且不会成为包含其后代的块的 abspos）。
• 不过，让它们表现得这样很容易——只需使用position:relative 设置它们的样式即可。