in-flow and out-of-flow

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

`position: sticky` : a pinned header¶

let 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>`

let 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 {
  border-radius: 10px;
  padding: 10px;
}

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

await tools.sample_from_strings({html: sticky_html, css: sticky_css},
                          {start_with: 'css', height: '200px', iframe_max_height: '200'})

`z-index`¶

when using out-of-flow elements, you may want to control what appears on top of what
see property z-index to define what is on the front or in the back

default is in-flow¶

out-of-flow is available too¶

position: sticky : a pinned header¶

see also¶

z-index¶

`position: sticky` : a pinned header¶

`z-index`¶