CODEWITHSUNDEEP
htmlcssflexboxabsolute
user2243240
user2243240

Reputation: 13

Are flexbox children "positioned" such that they can be used to absolutely position their children?

I am creating a header for my site, which contains a heading, list of navigation links and a search form. The entire page is set out using flexbox, thus:

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;
    ...
 }

The problem I am experiencing is that in Firefox, the search field is correctly positioned--at the bottom-right of the header--but in Chrome (and in other Webkit browsers) it is at the bottom-right of the page. According to the MDN article on position, (https://developer.mozilla.org/en-US/docs/Web/CSS/position), absolutely positioned elements are  "positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used." So obviously Firefox sees the flex-positioned elements as being positioned, but Webkit sees them as being in the normal flow. Which behaviour is "correct"? and is there some fallback I can use instead?

Thanks, Tom

Upvotes: 1

Views: 1444

Answers (1)

dholbert
dholbert

Reputation: 11859

I don't know if Chrome's behavior is correct, but Firefox's is definitely coded to an older version of the spec (and the spec text on absolute positioning inside of a flexbox has changed several times).

Bug on updating firefox behavior: https://bugzilla.mozilla.org/show_bug.cgi?id=874718

In the meantime, I'd recommend against relying on Firefox's current behavior regarding absolutely-positioned things inside of a flex container (unless they've got a position:relative ancestor between them and the container -- see below).

Answering your other questions:

  • No, flex items are not considered "positioned" (and do not become abspos containing blocks for their descendants).
  • It's easy to make them behave like that, though -- just style them with position:relative.

Upvotes: 3

Related Questions