in-flow and out-of-flow

tools = require('../js/tools'); tools.init()

default is in-flow¶

most of the elements we have seen so far are said to be in-flow :

• i.e. they show up in the order where they appear in the source

• at a position determined by the elements before them

out-of-flow is available too¶

• there are ways to create elements out-of-flow

• a common practical example is a pinned header (or navigation bar), illustrated below

sticky example : a pinned header¶

sticky_html = `
<div id="header">
  I am a header with <code>position: sticky</code><br>
  my background is made transparent on purpose
</div>

<div>scroll me up ! <br>
</div>

<div>you can see the header sticks at the top !</div>`

sticky_css = `
#header {
    position: sticky;
    top: 6px;

  /* everything below is just cosmetic */
    text-align:center;
    font-size: 20px;
    padding: 4px 10px;
    background-color: rgb(255 240 240 / .50);
    border: 3px solid red;
}

div:not(#header) {
    /* outline borders */
    border: 2px solid blue;
    margin-top: 20px;
    font-size: 45px;
    height: 400px;  /* fake content */
    background-color: #fafafa;
}`

tools.sample_from_strings({html: sticky_html, css: sticky_css},
                          {start_with: 'css', height: '16em'})

see also¶

• this topic is described at greater length in this MDN article

• css-tricks also has a blog post dedicated to floats

• WARNING : advised for advanced users only

  • beginners should probably not try to use this at first

  • as mix-and-match of display and position settings can quickly become rather confusing

  • see these as last resort, only if grid/flex really won’t work for you

extras¶

optional topics :

• see property z-index to define what is on the front or in the back

• experts : if you believe you have a full understanding of how CSS layouts work, you should give this test a shot
  (you will feel more humble afterwards ;-)