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），绝对定位的元素是 ＆＃34;相对于最近的祖先定位。如果定位的祖先不存在，则使用初始容器。＆＃34; 因此，很明显Firefox将灵活定位的元素视为定位，但Webkit认为它们处于正常流程中。哪种行为＆＃34;正确＆＃34;？我可以使用一些后备吗？

谢谢，汤姆

Answer 1

我不知道Chrome的行为是否正确，但Firefox的版本肯定已编码为较旧版本的规格（并且有关Flexbox内部绝对定位的规范文字已更改）几次）。

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

与此同时，我建议不要依赖Firefox当前关于灵活容器内绝对定位事物的行为（除非他们之间有position:relative祖先。和容器 - 见下文。

回答您的其他问题：

不，不考虑弹性物品＆＃34;定位＆＃34; （并且不要为他们的后代成为包含块的abspos。）
很容易让他们表现得那样 - 只需用position:relative来设置它们。

Flexbox儿童＆＃34;定位＆＃34;这样他们可以用来绝对定位他们的孩子？

1 个答案: