问:
Sticky Header Like Slack
I am trying to replicate the layout of Slack. One thing I cannot get working is getting the date to overlap the header. I inspected the Slack HTML/CSS and they are using a combination of Sticky and absolute positioning. I would prefer to use relative positioning.

HTML

```<code><html>

<head>
    <title>Slack</title>
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css">
</head>

<body class="sk-client-theme--dark">
    <div class="p-client_container">
        <div class="p-client">
            <div class="p-workspace p-workspace--context-pane-expanded p-workspace--classic-nav">
                <div class="p-workspace__banner"></div>

                <div class="p-workspace__top_nav">
                    <div class="p-classic_nav">
                        <div class="p-classic_nav__team_header"></div>

                        <div class="p-classic_nav__channel_header p-classic_nav__model_header"></div>

                        <div class="p-classic_nav__right_header p-classic_nav__right_header--context_pane"></div>
                    </div>
                </div>

                <div class="p-workspace__sidebar">
                    <nav class="p-channel_sidebar p-channel_sidebar--classic_nav">
                        <div class="p-channel_sidebar__navigation_bar">Navigation</div>

                        <div class="p-channel_sidebar__list">
                            <span>sidebar content first<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content last<br></span>
                        </div>
                    </nav>
                </div>

                <div class="p-workspace__primary_view">
                    <div class="p-workspace__primary_view_contents">
                        <div class="p-file_drag_drop__container">
                            <div class="p-message_pane p-message_pane--classic-nav">
                                <div class="c-virtual_list__item">
                                    <span>Primary View Content 1<br></span><span>Primary View Content<br></span>
                                </div>

                                <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
                                    <div class="c-message_list__day_divider__label">
                                        <div class="c-message_list__day_divider__label__pill">Sticky 1</div>
                                    </div>
                                </div>

                                <div class="c-virtual_list__item">
                                    <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span>
                                </div>

                                <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
                                    <div class="c-message_list__day_divider__label">
                                        <div class="c-message_list__day_divider__label__pill">Sticky 2</div>
                                    </div>
                                </div>

                                <div class="c-virtual_list__item">
                                    <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span>
                                </div>
                            </div>

                            <footer class="workspace__primary_view_footer">Footer1<br>Footer2</footer>
                        </div>
                    </div>
                </div>

                <div class="p-workspace__secondary_view"></div>
            </div>
        </div>
    </div>
</body>

</html>
</code>```

CSS

```<code>/************ reset ************/

*, ::after, ::before {
    box-sizing: inherit;
}

body, html {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

blockquote, body, caption, dd, dl, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, legend, ol, p, pre, table, td, th, ul {
    margin: 0;
    padding: 0;
}

body {
    background-color: #1a1d21;
}

*, ::after, ::before {
    box-sizing: inherit;
}

a {
    color: rgba(var(--sk_highlight, 18, 100, 163), 1);
    text-decoration: none;
}

/************ fonts ************/

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 300;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-0b50f74.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-1475c14.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 400;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-ea6d1e4.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 700;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-a532381.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 900;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-8857ce8.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 300;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-c593311.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-354fb58.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 400;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-5bbcd6c.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-d5261ac.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 700;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-99def7d.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-2187a11.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 900;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-04aca50.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-23c1971.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack v2;
    src: url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-3e925bf.woff) format("woff");
    font-style: normal;
    font-weight: 400
}

body {
    font-family: Slack-Lato, appleLogo, sans-serif;
}

body {
    font-size: 15px;
    line-height: 1.46668;
    font-weight: 400;
    color: white;
    font-variant-ligatures: common-ligatures;
}

/************ client ************/

.p-client {
    overflow: hidden;
}

.p-client {
    background: rgba(var(--sk_primary_background, 255, 255, 255), 1);
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas: "p-client__workspace";
}

/************ workspace ************/

.p-workspace {
    grid-area: p-client__workspace;
}

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
    min-width: 0;
    min-height: 0;
}

.p-workspace {
    display: grid;
    grid-template-rows: min-content 60px auto
}

/*** workspace context pane ***/

.p-workspace--context-pane-collapsed {
    grid-template-columns: 220px auto;
    grid-template-areas: "p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view"
}

.p-workspace--context-pane-expanded {
    grid-template-columns: 220px auto 312px;
    grid-template-areas: "p-workspace__banner p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view p-workspace__secondary_view"
}

@media screen and (min-width:1440px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 492px
    }
}

@media screen and (max-width:1440px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 442px
    }
}

@media screen and (max-width:1366px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 392px
    }
}

@media screen and (max-width:1279px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 367px
    }
}

@media screen and (max-width:1070px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 337px
    }
}

@media screen and (max-width:860px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 312px
    }
}

/************ banner ************/

.p-workspace__banner {
    grid-area: p-workspace__banner;
}

/************ top nav ************/

.p-workspace__top_nav {
    background: #1abc9c;
    grid-area: p-workspace__top_nav;
    min-width: 0;
}

/************ classic nav ************/

.p-classic_nav {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/************ team header ************/

.p-classic_nav__team_header {
    background: #2ecc71;
}

.p-classic_nav__team_header {
    flex-shrink: 0;
    width: 220px;
    height: 60px;
}

/************ channel header ************/

.p-classic_nav__channel_header {
    background: #9b59b6;
    display: flex;
    flex: 1;
    height: 60px;
    min-width: 0;
    position: relative;
}

/************ right header ************/

.p-classic_nav__right_header {
    flex-shrink: 0;
    height: 60px;
    display: flex;
    align-items: center;
}

@media screen and (min-width:1440px) {
    .p-classic_nav__right_header {
        width: 415px
    }
    .p-classic_nav__right_header--context_pane {
        width: 492px
    }
}

@media screen and (max-width:1440px) {
    .p-classic_nav__right_header {
        width: 365px
    }
    .p-classic_nav__right_header--context_pane {
        width: 442px
    }
}

@media screen and (max-width:1366px) {
    .p-classic_nav__right_header {
        width: 315px
    }
    .p-classic_nav__right_header--context_pane {
        width: 392px
    }
}

@media screen and (max-width:1279px) {
    .p-classic_nav__right_header {
        width: 300px
    }
    .p-classic_nav__right_header--context_pane {
        width: 367px
    }
}

@media screen and (max-width:1070px) {
    .p-classic_nav__right_header {
        width: 280px
    }
    .p-classic_nav__right_header--context_pane {
        width: 337px
    }
}

@media screen and (max-width:860px) {
    .p-classic_nav__right_header {
        width: 250px
    }
    .p-classic_nav__right_header--context_pane {
        width: 312px
    }
}

/************ side bar ************/

.p-workspace__sidebar {
    grid-area: p-workspace__sidebar;
    display: grid;
    grid-template-columns: auto;
    position: relative;
}

.p-workspace--classic-nav .p-workspace__sidebar {
    grid-template-areas: "p-workspace__channel_sidebar";
    grid-template-rows: auto;
}

.p-workspace__channel_sidebar {
    grid-area: p-workspace__channel_sidebar;
}

.p-channel_sidebar {
    background: #34495e;
    width: 220px;
    flex: 1;
    height: 100%;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.p-channel_sidebar__navigation_bar {
    background: #f1c40f;
}

.p-channel_sidebar__list {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0;
}

/************ common ************/

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
    min-width: 0;
    min-height: 0;
}

/************ primary view ************/

.p-workspace--classic-nav .p-workspace__primary_view {
    grid-template-areas: "p-workspace__primary_view_contents";
    grid-template-rows: auto;
}

.p-workspace__primary_view {
    grid-area: p-workspace__primary_view;
    display: grid;
    grid-template-columns: auto;
    background: #e67e22;
}

.p-workspace__primary_view_contents {
    display: flex;
    flex-direction: column;
    grid-area: p-workspace__primary_view_contents;
}

.p-file_drag_drop__container {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    background: red;
}

.p-message_pane {
    background: #3498db;
    flex: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.workspace__primary_view_footer {
    background: #bdc3c7;
}

/* sticky */

.c-virtual_list__item--sticky {
    position: sticky;
    top: -21px;
    z-index: 200;
}

.c-message_list__day_divider__label__pill {
    background:  white;
    display: inline-block;
    z-index: 201;
    padding: .25rem .75rem;
    border-radius: 24px;
    position: relative;
    color: black;
}

/************ secondary view ************/

.p-workspace--classic-nav .p-workspace__secondary_view {
    grid-template-areas: "p-workspace__secondary_view_contents";
    grid-template-rows: auto;
    background: #e74c3c;
}
</code>```

Link to jsbin

Sticky under header:

答:
The closest solution i got, simple i put that purple part inside the
  blue one to make z-index work

/************ reset ************/

*, ::after, ::before {
 box-sizing: inherit;
}

body, html {
 box-sizing: border-box;
 width: 100%;
 height: 100%;
 overflow: hidden;
}

blockquote, body, caption, dd, dl, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, legend, ol, p, pre, table, td, th, ul {
 margin: 0;
 padding: 0;
}

body {
 background-color: #1a1d21;
}

*, ::after, ::before {
 box-sizing: inherit;
}

a {
 color: rgba(var(--sk_highlight, 18, 100, 163), 1);
 text-decoration: none;
}

/************ fonts ************/

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 300;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-0b50f74.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-1475c14.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 400;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-ea6d1e4.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 700;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-a532381.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 900;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-8857ce8.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 300;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-c593311.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-354fb58.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 400;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-5bbcd6c.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-d5261ac.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 700;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-99def7d.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-2187a11.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 900;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-04aca50.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-23c1971.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack v2;
 src: url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-3e925bf.woff) format("woff");
 font-style: normal;
 font-weight: 400
}

body {
 font-family: Slack-Lato, appleLogo, sans-serif;
}

body {
 font-size: 15px;
 line-height: 1.46668;
 font-weight: 400;
 color: white;
 font-variant-ligatures: common-ligatures;
}

/************ client ************/

.p-client {
 overflow: hidden;
}

.p-client {
 background: rgba(var(--sk_primary_background, 255, 255, 255), 1);
 width: 100vw;
 height: 100vh;
 display: grid;
 grid-template-rows: auto;
 grid-template-columns: auto;
 grid-template-areas: "p-client__workspace";
}

/************ workspace ************/

.p-workspace {
 grid-area: p-client__workspace;
}

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
 min-width: 0;
 min-height: 0;
}

.p-workspace {
 display: grid;
 grid-template-rows: min-content 60px auto
}

/*** workspace context pane ***/

.p-workspace--context-pane-collapsed {
 grid-template-columns: 220px auto;
 grid-template-areas: "p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view"
}

.p-workspace--context-pane-expanded {
 grid-template-columns: 220px auto 312px;
 grid-template-areas: "p-workspace__banner p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view p-workspace__secondary_view"
}

@media screen and (min-width:1440px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 492px
 }
}

@media screen and (max-width:1440px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 442px
 }
}

@media screen and (max-width:1366px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 392px
 }
}

@media screen and (max-width:1279px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 367px
 }
}

@media screen and (max-width:1070px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 337px
 }
}

@media screen and (max-width:860px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 312px
 }
}

/************ banner ************/

.p-workspace__banner {
 grid-area: p-workspace__banner;
}

/************ top nav ************/

.p-workspace__top_nav {
 background: #1abc9c;
 grid-area: p-workspace__top_nav;
 min-width: 0;
}

/************ classic nav ************/

.p-classic_nav {
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: row;
 align-items: flex-start;
}

/************ team header ************/

.p-classic_nav__team_header {
 background: #2ecc71;
}

.p-classic_nav__team_header {
 flex-shrink: 0;
 width: 220px;
 height: 60px;
}

/************ channel header ************/

.p-classic_nav__channel_header {
 background: #9b59b6;
 display: flex;
 flex: 1;
 height: 60px;
 min-width: 0;
 position: relative;
      z-index: 1;
}

/************ right header ************/

.p-classic_nav__right_header {
 flex-shrink: 0;
 height: 60px;
 display: flex;
 align-items: center;
}

@media screen and (min-width:1440px) {
 .p-classic_nav__right_header {
  width: 415px
 }
 .p-classic_nav__right_header--context_pane {
  width: 492px
 }
}

@media screen and (max-width:1440px) {
 .p-classic_nav__right_header {
  width: 365px
 }
 .p-classic_nav__right_header--context_pane {
  width: 442px
 }
}

@media screen and (max-width:1366px) {
 .p-classic_nav__right_header {
  width: 315px
 }
 .p-classic_nav__right_header--context_pane {
  width: 392px
 }
}

@media screen and (max-width:1279px) {
 .p-classic_nav__right_header {
  width: 300px
 }
 .p-classic_nav__right_header--context_pane {
  width: 367px
 }
}

@media screen and (max-width:1070px) {
 .p-classic_nav__right_header {
  width: 280px
 }
 .p-classic_nav__right_header--context_pane {
  width: 337px
 }
}

@media screen and (max-width:860px) {
 .p-classic_nav__right_header {
  width: 250px
 }
 .p-classic_nav__right_header--context_pane {
  width: 312px
 }
}

/************ side bar ************/

.p-workspace__sidebar {
 grid-area: p-workspace__sidebar;
 display: grid;
 grid-template-columns: auto;
 position: relative;
}

.p-workspace--classic-nav .p-workspace__sidebar {
 grid-template-areas: "p-workspace__channel_sidebar";
 grid-template-rows: auto;
}

.p-workspace__channel_sidebar {
 grid-area: p-workspace__channel_sidebar;
}

.p-channel_sidebar {
 background: #34495e;
 width: 220px;
 flex: 1;
 height: 100%;
 position: relative;
 padding: 0;
 display: flex;
 flex-direction: column;
}

.p-channel_sidebar__navigation_bar {
 background: #f1c40f;
}

.p-channel_sidebar__list {
 flex: 1 1 auto;
 overflow-y: auto;
 height: 0;
}

/************ common ************/

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
 min-width: 0;
 min-height: 0;
}

/************ primary view ************/

.p-workspace--classic-nav .p-workspace__primary_view {
 grid-template-areas: "p-workspace__primary_view_contents";
 grid-template-rows: auto;
}

.p-workspace__primary_view {
 grid-area: p-workspace__primary_view;
 margin-top: -60px;
 grid-template-columns: auto;
 background: #e67e22;
}

.p-workspace__primary_view_contents {
 display: flex;
 flex-direction: column;
 grid-area: p-workspace__primary_view_contents;
}

.p-file_drag_drop__container {
 display: flex;
 flex-direction: column;
 position: relative;
 height: 100%;
 background: red;
}

.p-message_pane {
 background: #3498db;
 flex: auto;
 position: relative;
 display: flex;
 flex-direction: column;
 overflow-y: visible;
 overflow-x: visible;
}

.workspace__primary_view_footer {
 background: #bdc3c7;
}

/* sticky */

.c-virtual_list__item--sticky {
 position: sticky;
 top: -21px;
 z-index: 200;
}

.c-message_list__day_divider__label__pill {
 background:  white;
 display: inline-block;
 z-index: 201;
 padding: .25rem .75rem;
 border-radius: 24px;
 position: relative;
 color: black;
}

/************ secondary view ************/

.p-workspace--classic-nav .p-workspace__secondary_view {
 grid-template-areas: "p-workspace__secondary_view_contents";
 grid-template-rows: auto;
 background: #e74c3c;
}
.p-workspace__primary_view_contents {
    display: flex;
    flex-direction: column;
    grid-area: p-workspace__primary_view_contents;
    overflow-y: scroll;
    z-index: 11;
    margin-top: -60px;
    padding-top: 59px;
    height: 100%;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><html>

<head>
 <title>Slack</title>
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link rel="stylesheet" href="./styles.css">
</head>

<body class="sk-client-theme--dark">
 <div class="p-client_container">
  <div class="p-client">
   <div class="p-workspace p-workspace--context-pane-expanded p-workspace--classic-nav">
    <div class="p-workspace__banner"></div>

    <div class="p-workspace__top_nav">
     <div class="p-classic_nav">
      <div class="p-classic_nav__team_header"></div>

      <div class="p-classic_nav__right_header p-classic_nav__right_header--context_pane"></div>
     </div>
    </div>

    <div class="p-workspace__sidebar">
     <nav class="p-channel_sidebar p-channel_sidebar--classic_nav">
      <div class="p-channel_sidebar__navigation_bar">Navigation</div>

      <div class="p-channel_sidebar__list">
       <span>sidebar content first<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content last<br></span>
      </div>
     </nav>
    </div>

    <div class="p-workspace__primary_view">
                  <div class="p-classic_nav__channel_header p-classic_nav__model_header"></div>
     <div class="p-workspace__primary_view_contents">
      <div class="p-file_drag_drop__container">
       <div class="p-message_pane p-message_pane--classic-nav">
        <div class="c-virtual_list__item">
         <span>Primary View Content 1<br></span><span>Primary View Content<br></span>
        </div>

        <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
         <div class="c-message_list__day_divider__label">
          <div class="c-message_list__day_divider__label__pill">Sticky 1</div>
         </div>
        </div>

        <div class="c-virtual_list__item">
         <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span>
        </div>

        <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
         <div class="c-message_list__day_divider__label">
          <div class="c-message_list__day_divider__label__pill">Sticky 2</div>
         </div>
        </div>

        <div class="c-virtual_list__item">
         <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span>
        </div>
       </div>

       <footer class="workspace__primary_view_footer">Footer1<br>Footer2</footer>
      </div>
     </div>
    </div>

    <div class="p-workspace__secondary_view"></div>
   </div>
  </div>
 </div>
</body>

</html></code>```

Title: Sticky Header Like Slack

Body:
I am trying to replicate the layout of Slack. One thing I cannot get working is getting the date to overlap the header. I inspected the Slack HTML/CSS and they are using a combination of Sticky and absolute positioning. I would prefer to use relative positioning.

HTML

    <title>Slack</title>
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css">

Navigation

                            sidebar content first
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content
sidebar content last

                                    Primary View Content 1
Primary View Content

Sticky 1

                                    Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content

Sticky 2

                                    Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content Last
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content
Primary View Content Last

                            Footer1
Footer2

CSS

/************ reset ************/

*, ::after, ::before {
    box-sizing: inherit;
}

body, html {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

blockquote, body, caption, dd, dl, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, legend, ol, p, pre, table, td, th, ul {
    margin: 0;
    padding: 0;
}

body {
    background-color: #1a1d21;
}

*, ::after, ::before {
    box-sizing: inherit;
}

a {
    color: rgba(var(--sk_highlight, 18, 100, 163), 1);
    text-decoration: none;
}

/************ fonts ************/

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 300;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-0b50f74.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-1475c14.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 400;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-ea6d1e4.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 700;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-a532381.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 900;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-8857ce8.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 300;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-c593311.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-354fb58.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 400;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-5bbcd6c.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-d5261ac.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 700;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-99def7d.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-2187a11.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 900;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-04aca50.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-23c1971.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack v2;
    src: url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-3e925bf.woff) format("woff");
    font-style: normal;
    font-weight: 400
}

body {
    font-family: Slack-Lato, appleLogo, sans-serif;
}

body {
    font-size: 15px;
    line-height: 1.46668;
    font-weight: 400;
    color: white;
    font-variant-ligatures: common-ligatures;
}

/************ client ************/

.p-client {
    overflow: hidden;
}

.p-client {
    background: rgba(var(--sk_primary_background, 255, 255, 255), 1);
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas: "p-client__workspace";
}

/************ workspace ************/

.p-workspace {
    grid-area: p-client__workspace;
}

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
    min-width: 0;
    min-height: 0;
}

.p-workspace {
    display: grid;
    grid-template-rows: min-content 60px auto
}

/*** workspace context pane ***/

.p-workspace--context-pane-collapsed {
    grid-template-columns: 220px auto;
    grid-template-areas: "p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view"
}

.p-workspace--context-pane-expanded {
    grid-template-columns: 220px auto 312px;
    grid-template-areas: "p-workspace__banner p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view p-workspace__secondary_view"
}

@media screen and (min-width:1440px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 492px
    }
}

@media screen and (max-width:1440px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 442px
    }
}

@media screen and (max-width:1366px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 392px
    }
}

@media screen and (max-width:1279px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 367px
    }
}

@media screen and (max-width:1070px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 337px
    }
}

@media screen and (max-width:860px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 312px
    }
}

/************ banner ************/

.p-workspace__banner {
    grid-area: p-workspace__banner;
}

/************ top nav ************/

.p-workspace__top_nav {
    background: #1abc9c;
    grid-area: p-workspace__top_nav;
    min-width: 0;
}

/************ classic nav ************/

.p-classic_nav {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/************ team header ************/

.p-classic_nav__team_header {
    background: #2ecc71;
}

.p-classic_nav__team_header {
    flex-shrink: 0;
    width: 220px;
    height: 60px;
}

/************ channel header ************/

.p-classic_nav__channel_header {
    background: #9b59b6;
    display: flex;
    flex: 1;
    height: 60px;
    min-width: 0;
    position: relative;
}

/************ right header ************/

.p-classic_nav__right_header {
    flex-shrink: 0;
    height: 60px;
    display: flex;
    align-items: center;
}

@media screen and (min-width:1440px) {
    .p-classic_nav__right_header {
        width: 415px
    }
    .p-classic_nav__right_header--context_pane {
        width: 492px
    }
}

@media screen and (max-width:1440px) {
    .p-classic_nav__right_header {
        width: 365px
    }
    .p-classic_nav__right_header--context_pane {
        width: 442px
    }
}

@media screen and (max-width:1366px) {
    .p-classic_nav__right_header {
        width: 315px
    }
    .p-classic_nav__right_header--context_pane {
        width: 392px
    }
}

@media screen and (max-width:1279px) {
    .p-classic_nav__right_header {
        width: 300px
    }
    .p-classic_nav__right_header--context_pane {
        width: 367px
    }
}

@media screen and (max-width:1070px) {
    .p-classic_nav__right_header {
        width: 280px
    }
    .p-classic_nav__right_header--context_pane {
        width: 337px
    }
}

@media screen and (max-width:860px) {
    .p-classic_nav__right_header {
        width: 250px
    }
    .p-classic_nav__right_header--context_pane {
        width: 312px
    }
}

/************ side bar ************/

.p-workspace__sidebar {
    grid-area: p-workspace__sidebar;
    display: grid;
    grid-template-columns: auto;
    position: relative;
}

.p-workspace--classic-nav .p-workspace__sidebar {
    grid-template-areas: "p-workspace__channel_sidebar";
    grid-template-rows: auto;
}

.p-workspace__channel_sidebar {
    grid-area: p-workspace__channel_sidebar;
}

.p-channel_sidebar {
    background: #34495e;
    width: 220px;
    flex: 1;
    height: 100%;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.p-channel_sidebar__navigation_bar {
    background: #f1c40f;
}

.p-channel_sidebar__list {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0;
}

/************ common ************/

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
    min-width: 0;
    min-height: 0;
}

/************ primary view ************/

.p-workspace--classic-nav .p-workspace__primary_view {
    grid-template-areas: "p-workspace__primary_view_contents";
    grid-template-rows: auto;
}

.p-workspace__primary_view {
    grid-area: p-workspace__primary_view;
    display: grid;
    grid-template-columns: auto;
    background: #e67e22;
}

.p-workspace__primary_view_contents {
    display: flex;
    flex-direction: column;
    grid-area: p-workspace__primary_view_contents;
}

.p-file_drag_drop__container {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    background: red;
}

.p-message_pane {
    background: #3498db;
    flex: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.workspace__primary_view_footer {
    background: #bdc3c7;
}

/* sticky */

.c-virtual_list__item--sticky {
    position: sticky;
    top: -21px;
    z-index: 200;
}

.c-message_list__day_divider__label__pill {
    background:  white;
    display: inline-block;
    z-index: 201;
    padding: .25rem .75rem;
    border-radius: 24px;
    position: relative;
    color: black;
}

/************ secondary view ************/

.p-workspace--classic-nav .p-workspace__secondary_view {
    grid-template-areas: "p-workspace__secondary_view_contents";
    grid-template-rows: auto;
    background: #e74c3c;
}

Link to jsbin

Sticky under header:

Body:
The closest solution i got, simple i put that purple part inside the
  blue one to make z-index work

/************ reset ************/

*, ::after, ::before {
 box-sizing: inherit;
}

body, html {
 box-sizing: border-box;
 width: 100%;
 height: 100%;
 overflow: hidden;
}

blockquote, body, caption, dd, dl, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, legend, ol, p, pre, table, td, th, ul {
 margin: 0;
 padding: 0;
}

body {
 background-color: #1a1d21;
}

*, ::after, ::before {
 box-sizing: inherit;
}

a {
 color: rgba(var(--sk_highlight, 18, 100, 163), 1);
 text-decoration: none;
}

/************ fonts ************/

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 300;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-0b50f74.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-1475c14.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 400;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-ea6d1e4.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 700;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-a532381.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 900;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-8857ce8.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 300;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-c593311.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-354fb58.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 400;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-5bbcd6c.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-d5261ac.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 700;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-99def7d.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-2187a11.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 900;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-04aca50.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-23c1971.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack v2;
 src: url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-3e925bf.woff) format("woff");
 font-style: normal;
 font-weight: 400
}

body {
 font-family: Slack-Lato, appleLogo, sans-serif;
}

body {
 font-size: 15px;
 line-height: 1.46668;
 font-weight: 400;
 color: white;
 font-variant-ligatures: common-ligatures;
}

/************ client ************/

.p-client {
 overflow: hidden;
}

.p-client {
 background: rgba(var(--sk_primary_background, 255, 255, 255), 1);
 width: 100vw;
 height: 100vh;
 display: grid;
 grid-template-rows: auto;
 grid-template-columns: auto;
 grid-template-areas: "p-client__workspace";
}

/************ workspace ************/

.p-workspace {
 grid-area: p-client__workspace;
}

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
 min-width: 0;
 min-height: 0;
}

.p-workspace {
 display: grid;
 grid-template-rows: min-content 60px auto
}

/*** workspace context pane ***/

.p-workspace--context-pane-collapsed {
 grid-template-columns: 220px auto;
 grid-template-areas: "p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view"
}

.p-workspace--context-pane-expanded {
 grid-template-columns: 220px auto 312px;
 grid-template-areas: "p-workspace__banner p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view p-workspace__secondary_view"
}

@media screen and (min-width:1440px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 492px
 }
}

@media screen and (max-width:1440px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 442px
 }
}

@media screen and (max-width:1366px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 392px
 }
}

@media screen and (max-width:1279px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 367px
 }
}

@media screen and (max-width:1070px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 337px
 }
}

@media screen and (max-width:860px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 312px
 }
}

/************ banner ************/

.p-workspace__banner {
 grid-area: p-workspace__banner;
}

/************ top nav ************/

.p-workspace__top_nav {
 background: #1abc9c;
 grid-area: p-workspace__top_nav;
 min-width: 0;
}

/************ classic nav ************/

.p-classic_nav {
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: row;
 align-items: flex-start;
}

/************ team header ************/

.p-classic_nav__team_header {
 background: #2ecc71;
}

.p-classic_nav__team_header {
 flex-shrink: 0;
 width: 220px;
 height: 60px;
}

/************ channel header ************/

.p-classic_nav__channel_header {
 background: #9b59b6;
 display: flex;
 flex: 1;
 height: 60px;
 min-width: 0;
 position: relative;
      z-index: 1;
}

/************ right header ************/

.p-classic_nav__right_header {
 flex-shrink: 0;
 height: 60px;
 display: flex;
 align-items: center;
}

@media screen and (min-width:1440px) {
 .p-classic_nav__right_header {
  width: 415px
 }
 .p-classic_nav__right_header--context_pane {
  width: 492px
 }
}

@media screen and (max-width:1440px) {
 .p-classic_nav__right_header {
  width: 365px
 }
 .p-classic_nav__right_header--context_pane {
  width: 442px
 }
}

@media screen and (max-width:1366px) {
 .p-classic_nav__right_header {
  width: 315px
 }
 .p-classic_nav__right_header--context_pane {
  width: 392px
 }
}

@media screen and (max-width:1279px) {
 .p-classic_nav__right_header {
  width: 300px
 }
 .p-classic_nav__right_header--context_pane {
  width: 367px
 }
}

@media screen and (max-width:1070px) {
 .p-classic_nav__right_header {
  width: 280px
 }
 .p-classic_nav__right_header--context_pane {
  width: 337px
 }
}

@media screen and (max-width:860px) {
 .p-classic_nav__right_header {
  width: 250px
 }
 .p-classic_nav__right_header--context_pane {
  width: 312px
 }
}

/************ side bar ************/

.p-workspace__sidebar {
 grid-area: p-workspace__sidebar;
 display: grid;
 grid-template-columns: auto;
 position: relative;
}

.p-workspace--classic-nav .p-workspace__sidebar {
 grid-template-areas: "p-workspace__channel_sidebar";
 grid-template-rows: auto;
}

.p-workspace__channel_sidebar {
 grid-area: p-workspace__channel_sidebar;
}

.p-channel_sidebar {
 background: #34495e;
 width: 220px;
 flex: 1;
 height: 100%;
 position: relative;
 padding: 0;
 display: flex;
 flex-direction: column;
}

.p-channel_sidebar__navigation_bar {
 background: #f1c40f;
}

.p-channel_sidebar__list {
 flex: 1 1 auto;
 overflow-y: auto;
 height: 0;
}

/************ common ************/

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
 min-width: 0;
 min-height: 0;
}

/************ primary view ************/

.p-workspace--classic-nav .p-workspace__primary_view {
 grid-template-areas: "p-workspace__primary_view_contents";
 grid-template-rows: auto;
}

.p-workspace__primary_view {
 grid-area: p-workspace__primary_view;
 margin-top: -60px;
 grid-template-columns: auto;
 background: #e67e22;
}

.p-workspace__primary_view_contents {
 display: flex;
 flex-direction: column;
 grid-area: p-workspace__primary_view_contents;
}

.p-file_drag_drop__container {
 display: flex;
 flex-direction: column;
 position: relative;
 height: 100%;
 background: red;
}

.p-message_pane {
 background: #3498db;
 flex: auto;
 position: relative;
 display: flex;
 flex-direction: column;
 overflow-y: visible;
 overflow-x: visible;
}

.workspace__primary_view_footer {
 background: #bdc3c7;
}

/* sticky */

.c-virtual_list__item--sticky {
 position: sticky;
 top: -21px;
 z-index: 200;
}

.c-message_list__day_divider__label__pill {
 background:  white;
 display: inline-block;
 z-index: 201;
 padding: .25rem .75rem;
 border-radius: 24px;
 position: relative;
 color: black;
}

/************ secondary view ************/

.p-workspace--classic-nav .p-workspace__secondary_view {
 grid-template-areas: "p-workspace__secondary_view_contents";
 grid-template-rows: auto;
 background: #e74c3c;
}
.p-workspace__primary_view_contents {
    display: flex;
    flex-direction: column;
    grid-area: p-workspace__primary_view_contents;
    overflow-y: scroll;
    z-index: 11;
    margin-top: -60px;
    padding-top: 59px;
    height: 100%;
}

<html>

<head>
 <title>Slack</title>
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link rel="stylesheet" href="./styles.css">
</head>

<body class="sk-client-theme--dark">
 <div class="p-client_container">
  <div class="p-client">
   <div class="p-workspace p-workspace--context-pane-expanded p-workspace--classic-nav">
    <div class="p-workspace__banner"></div>

    <div class="p-workspace__top_nav">
     <div class="p-classic_nav">
      <div class="p-classic_nav__team_header"></div>

      <div class="p-classic_nav__right_header p-classic_nav__right_header--context_pane"></div>
     </div>
    </div>

    <div class="p-workspace__sidebar">
     <nav class="p-channel_sidebar p-channel_sidebar--classic_nav">
      <div class="p-channel_sidebar__navigation_bar">Navigation</div>

      <div class="p-channel_sidebar__list">
       <span>sidebar content first<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content last<br></span>
      </div>
     </nav>
    </div>

    <div class="p-workspace__primary_view">
                  <div class="p-classic_nav__channel_header p-classic_nav__model_header"></div>
     <div class="p-workspace__primary_view_contents">
      <div class="p-file_drag_drop__container">
       <div class="p-message_pane p-message_pane--classic-nav">
        <div class="c-virtual_list__item">
         <span>Primary View Content 1<br></span><span>Primary View Content<br></span>
        </div>

        <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
         <div class="c-message_list__day_divider__label">
          <div class="c-message_list__day_divider__label__pill">Sticky 1</div>
         </div>
        </div>

        <div class="c-virtual_list__item">
         <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span>
        </div>

        <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
         <div class="c-message_list__day_divider__label">
          <div class="c-message_list__day_divider__label__pill">Sticky 2</div>
         </div>
        </div>

        <div class="c-virtual_list__item">
         <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span>
        </div>
       </div>

       <footer class="workspace__primary_view_footer">Footer1<br>Footer2</footer>
      </div>
     </div>
    </div>

    <div class="p-workspace__secondary_view"></div>
   </div>
  </div>
 </div>
</body>

</html>


来源: stackexchange

问:
Best way to store number of children in parent table in MYSQL
I am trying to implement a simple product system in MYSQL, where a product can have many comments. There is a foreign key product_id in the comment table referencing the product table. I want to store the number of comments of the product as a field in the product table for sorting purpose. It can be achieved by creating two triggers on the comment table like this

```<code>DELIMITER $$
CREATE TRIGGER comment_incr_trig
AFTER INSERT ON `COMMENT` FOR EACH ROW
begin
    UPDATE PRODUCT SET NUM_OF_COMMENT = NUM_OF_COMMENT + 1 WHERE ID = NEW.PRODUCT_ID;
END;
$$
DELIMITER ;
</code>```

```<code>DELIMITER $$
CREATE TRIGGER comment_decr_trig
AFTER DELETE ON `COMMENT` FOR EACH ROW
begin
    UPDATE PRODUCT SET NUM_OF_COMMENT = NUM_OF_COMMENT - 1 WHERE ID = OLD.PRODUCT_ID;
END;
$$
DELIMITER ;
</code>```

However, is there any mechanism in MYSQL that can directly bind one field in the parent table to the number of children without using trigger?

Many Thanks.

答:
I would generally recommend against storing such derived information. You can easily compute on the fly in your queries whenever you need it.

To avoid repeatedly typing the same query again, one solution would be to create a view:

```<code>create view product_view(id, num_of_comments) as
select
    p.id,
    c.num_of_comments
from product p
left join (
    select product_id, count(*) num_of_comments
    from comment
    group by product_id
) c on c.product_id = p.id
</code>```

You can expand the view with more columns coming from the product table (I could not add more since the only column that is showned in your question is product(id)).

ContentLicense: CC BY-SA 4.0

Body:
I am trying to implement a simple product system in MYSQL, where a product can have many comments. There is a foreign key product_id in the comment table referencing the product table. I want to store the number of comments of the product as a field in the product table for sorting purpose. It can be achieved by creating two triggers on the comment table like this

DELIMITER $$
CREATE TRIGGER comment_incr_trig
AFTER INSERT ON `COMMENT` FOR EACH ROW
begin
    UPDATE PRODUCT SET NUM_OF_COMMENT = NUM_OF_COMMENT + 1 WHERE ID = NEW.PRODUCT_ID;
END;
$$
DELIMITER ;

DELIMITER $$
CREATE TRIGGER comment_decr_trig
AFTER DELETE ON `COMMENT` FOR EACH ROW
begin
    UPDATE PRODUCT SET NUM_OF_COMMENT = NUM_OF_COMMENT - 1 WHERE ID = OLD.PRODUCT_ID;
END;
$$
DELIMITER ;

However, is there any mechanism in MYSQL that can directly bind one field in the parent table to the number of children without using trigger?

Many Thanks.

Body:
I would generally recommend against storing such derived information. You can easily compute on the fly in your queries whenever you need it.

To avoid repeatedly typing the same query again, one solution would be to create a view:

create view product_view(id, num_of_comments) as
select
    p.id,
    c.num_of_comments
from product p
left join (
    select product_id, count(*) num_of_comments
    from comment
    group by product_id
) c on c.product_id = p.id

You can expand the view with more columns coming from the product table (I could not add more since the only column that is showned in your question is product(id)).


问:
.NET units class, inches to millimeters
Does .NET has Units conversion class? I need to convert inches to millimeters and vise versa. </p>

答:
No, you need to make one yourself, like this:</p>

```<code>public class Length
{
    private const double MillimetersPerInch = 25.4;
    private double _Millimeters;

    public static Length FromMillimeters(double mm)
    {
         return new Length { _Millimeters = mm };
    }

    public static Length FromInch(double inch)
    {
         return new Length { _Millimeters = inch * MillimetersPerInch };
    }

    public double Inch { get { return _Millimeters / MillimetersPerInch; } }
    public double Millimeters { get { return _Millimeters; } }
}
</code>```

ContentLicense: CC BY-SA 3.0

Title: .NET units class, inches to millimeters

Body:
No, you need to make one yourself, like this:

public class Length
{
    private const double MillimetersPerInch = 25.4;
    private double _Millimeters;

    public static Length FromMillimeters(double mm)
    {
         return new Length { _Millimeters = mm };
    }

    public static Length FromInch(double inch)
    {
         return new Length { _Millimeters = inch * MillimetersPerInch };
    }

    public double Inch { get { return _Millimeters / MillimetersPerInch; } }
    public double Millimeters { get { return _Millimeters; } }
}


问:
C++ move semantics and code duplication as a result of method overloading
Before I begin, I didn't find anything that completely explains my question in an other stackoverflow post so I decided to create my own. Apologies if it is already answered somewhere else(kindly point me to the existing post if it does exist).

Lets say we have the following two methods inside of a class:

```<code>int do_stuff(Thing& thing){ /* Do stuff... */} // L-value version
int do_stuff(Thing&& thing){ /* Do stuff... */} // R-value version
</code>```

From what I have read, modern C++ has pretty much abandoned this kind of logic and it is recommending to just pass the Thing by value and let the compiler do it's magic. My question is, If I want to have two separate methods that explicitly handles L-values/R-values and avoid code duplication, which of the following is best(performance wise and as in best practice)?

```<code>int do_stuff(Thing& thing){ return do_stuff(std::move(thing)); } // The L-value version uses the R-value one
</code>```

Or

```<code>int do_stuff(Thing&& thing){ return do_stuff(thing); } // The R-value version uses the L-value one since text is an L-value inside the scope of do_stuff(Thing&&)
</code>```

Edit: The purpose of the question is for me to understand this simple case of move semantics and not to create a valid C++ API.

Edit #2: The print and std::string parts of the question are used as an example. They can be anything.

Edit #3: Renamed the example code. The methods do modify the Thing object.

答:
If print doesn't change anything and only prints the string, it's best to take a const std::string & as const std::string & is able to bind to both  lvalues and rvalues.

```<code>int print(const std::string& text) {}
</code>```

Body:
Before I begin, I didn't find anything that completely explains my question in an other stackoverflow post so I decided to create my own. Apologies if it is already answered somewhere else(kindly point me to the existing post if it does exist).

Lets say we have the following two methods inside of a class:

int do_stuff(Thing& thing){ /* Do stuff... */} // L-value version
int do_stuff(Thing&& thing){ /* Do stuff... */} // R-value version

From what I have read, modern C++ has pretty much abandoned this kind of logic and it is recommending to just pass the Thing by value and let the compiler do it's magic. My question is, If I want to have two separate methods that explicitly handles L-values/R-values and avoid code duplication, which of the following is best(performance wise and as in best practice)?

int do_stuff(Thing& thing){ return do_stuff(std::move(thing)); } // The L-value version uses the R-value one

Or

int do_stuff(Thing&& thing){ return do_stuff(thing); } // The R-value version uses the L-value one since text is an L-value inside the scope of do_stuff(Thing&&)

Edit: The purpose of the question is for me to understand this simple case of move semantics and not to create a valid C++ API.

Edit #2: The print and std::string parts of the question are used as an example. They can be anything.

Edit #3: Renamed the example code. The methods do modify the Thing object.

Body:
If print doesn't change anything and only prints the string, it's best to take a const std::string & as const std::string & is able to bind to both  lvalues and rvalues.

int print(const std::string& text) {}


问:
C# Error System.FormatException: 'Input string was not in a correct format.' on number input
I have a simple form which has a few fields which all calculate off each other and are text boxes that require number inputs, I am having an issue where when I submit the form I get the following error even though the text boxes only contain numbers.

Error:

System.FormatException: 'Input string was not in a correct format.'

```<code>This exception was originally thrown at this call stack:
    System.Number.StringToNumber(string, System.Globalization.NumberStyles, ref System.Number.NumberBuffer, System.Globalization.NumberFormatInfo, bool)
    System.Number.ParseDecimal(string, System.Globalization.NumberStyles, System.Globalization.NumberFormatInfo)
    System.Convert.ToDecimal(string)
    CTMS.Fuel.fuelFromTextBox_TextChanged(object, System.EventArgs) in Fuel.cs
    System.Windows.Forms.Control.OnTextChanged(System.EventArgs)
    System.Windows.Forms.TextBoxBase.OnTextChanged(System.EventArgs)
    System.Windows.Forms.Control.Text.set(string)
    System.Windows.Forms.TextBoxBase.Text.set(string)
    System.Windows.Forms.TextBox.Text.set(string)
    CTMS.Fuel.AddFuelButton_Click(object, System.EventArgs) in Fuel.cs
    ...
    [Call Stack Truncated]
</code>```

From Here:

```<code> private void fuelFromTextBox_TextChanged(object sender, EventArgs e)
    {
        decimal parsedValue;

        if (!decimal.TryParse(fuelToTextBox.Text, out parsedValue))
        {

        }
        else
        {
            mileageMinusTextBox.Text = (Convert.ToDecimal(fuelToTextBox.Text) - Convert.ToDecimal(fuelFromTextBox.Text)).ToString();
        }

        decimal parsedValue2;

        if (!decimal.TryParse(fuelLitersTextBox.Text, out parsedValue2))
        {

        }
        else
        {
            fuelGallonsTextBox.Text = (Convert.ToDecimal(fuelLitersTextBox.Text) / Convert.ToDecimal(convTextBox.Text)).ToString();

        }

        Decimal parsedValue3;

        if (!Decimal.TryParse(fuelGallonsTextBox.Text, out parsedValue3))
        {

        }
        else
        {
            fuelMPGTextBox.Text = Math.Round((Convert.ToDecimal(mileageMinusTextBox.Text) / Convert.ToDecimal(fuelGallonsTextBox.Text)), 3).ToString();
        }

        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
    }
</code>```

Full Code:

```<code>using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace CTMS
{
public partial class Fuel : Form
{
    public Fuel()
    {
        InitializeComponent();
    }

    private void Fuel_Load(object sender, EventArgs e)
    {
        this.fuelTableAdapter.Fill(this.cTDBDataSet.fuel);
        SqlConnection con = new SqlConnection(Properties.Settings.Default.CTDBCS);
        convTextBox.Text = "4.546";
        con.Open();

        if (con.State == ConnectionState.Open)
        {
            connectedPic.Visible = true;
            disconnectedPic.Visible = false;
            panel1.BackColor = Color.LightGreen;
        }
        else
        {
            connectedPic.Visible = false;
            disconnectedPic.Visible = true;
            panel1.BackColor = Color.OrangeRed;
        }

        string Sql = "SELECT DISTINCT reg FROM vehicles";
        SqlCommand cmd = new SqlCommand(Sql, con);
        SqlDataReader DR = cmd.ExecuteReader();

        while (DR.Read())
        {
            fuelReg.Items.Add(DR[0]);
            fuelReg.SelectedIndex = -1;
            fuelRegView.Items.Add(DR[0]);
            fuelRegView.SelectedIndex = -1;
        }

        con.Close();
        mileageMinusTextBox.Text = "0";
    }

    private void AddFuelButton_Click(object sender, EventArgs e)
    {
        fuelDateTimeCombined.Text = fuelDatePicker.Text + ' ' + fuelTimePicker.Text;
        int currmile;
        int prevmile;
        Int32.TryParse(fuelToTextBox.Text, out currmile);
        Int32.TryParse(fuelFromTextBox.Text, out prevmile);

        if (string.IsNullOrWhiteSpace(fuelReg.Text) || string.IsNullOrWhiteSpace(fuelFromTextBox.Text) || string.IsNullOrWhiteSpace(fuelLitersTextBox.Text) ||
            currmile < prevmile)

        {
            MessageBox.Show("Values Missing or Mileage less than previous", "", MessageBoxButtons.OK, MessageBoxIcon.Error);
        }

        else
        {
            SqlConnection con = new SqlConnection(Properties.Settings.Default.CTDBCS);
            con.Open();
            string Sql = "INSERT INTO fuel (fuelreg, fuelprevmile, fuelcurrentmile, fuellitres, fuelmpg, fueldatetime)"
                        + "VALUES("
                        + "'" + fuelReg.Text + "', "
                        + "'" + fuelFromTextBox.Text + "', "
                        + "'" + fuelToTextBox.Text + "', "
                        + "'" + fuelLitersTextBox.Text + "', "
                        + "'" + fuelMPGTextBox.Text + "', "
                        + "'" + fuelDateTimeCombined.Text + "'"
                        + "); ";
            SqlCommand cmd = new SqlCommand(Sql, con);
            SqlDataReader DR = cmd.ExecuteReader();
            con.Close();

            fuelReg.Text = null;
            fuelFromTextBox.Text = null;
            fuelToTextBox.Text = null;
            fuelLitersTextBox.Text = null;
            fuelMPGTextBox.Text = null;
            fuelDatePicker.Text = null;
            fuelTimePicker.Text = null;
            fuelDateTimeCombined.Text = null;
            this.fuelTableAdapter.Fill(this.cTDBDataSet.fuel);
        }
    }

    private void FuelDateNowButton_Click(object sender, EventArgs e)
    {
        fuelDatePicker.Text = DateTime.Now.ToString();
        fuelTimePicker.Text = DateTime.Now.ToString();

    }

    private void FuelPrevMileage_Click(object sender, EventArgs e)
    {

    }

    private void FuelReg_SelectedIndexChanged(object sender, EventArgs e)
    {

        fuelFromTextBox.ReadOnly = false;
        fuelToTextBox.ReadOnly = false;
        fuelLitersTextBox.ReadOnly = false;

    }

    private void FuelBindingNavigatorSaveItem_Click(object sender, EventArgs e)
    {
        this.Validate();
        this.fuelBindingSource.EndEdit();
        this.tableAdapterManager.UpdateAll(this.cTDBDataSet);

    }

    private void mileageMinusTextBox_TextChanged(object sender, EventArgs e)
    {
        decimal parsedValue2;

        if (!decimal.TryParse(fuelLitersTextBox.Text, out parsedValue2))
        {

        }
        else
        {
            fuelGallonsTextBox.Text = (Convert.ToDecimal(fuelLitersTextBox.Text) / Convert.ToDecimal(convTextBox.Text)).ToString();

        }
        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
    }

    private void FuelLitersTextBox_TextChanged(object sender, EventArgs e)
    {
        decimal parsedValue;

        if (!decimal.TryParse(fuelLitersTextBox.Text, out parsedValue))
        {

        }
        else
        {
            fuelGallonsTextBox.Text = (Convert.ToDecimal(fuelLitersTextBox.Text) / Convert.ToDecimal(convTextBox.Text)).ToString();

        }
        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();

    }

    private void fuelToTextBox_TextChanged(object sender, EventArgs e)
    {
        int parsedValue;

        if (!int.TryParse(fuelToTextBox.Text, out parsedValue))
        {

        }
        else
        {
            mileageMinusTextBox.Text = (Convert.ToDecimal(fuelToTextBox.Text) - Convert.ToDecimal(fuelFromTextBox.Text)).ToString();
        }

        decimal parsedValue2;

        if (!decimal.TryParse(fuelLitersTextBox.Text, out parsedValue2))
        {

        }
        else
        {
            fuelGallonsTextBox.Text = (Convert.ToDecimal(fuelLitersTextBox.Text) / Convert.ToDecimal(convTextBox.Text)).ToString();

        }

        Decimal parsedValue3;

        if (!Decimal.TryParse(fuelGallonsTextBox.Text, out parsedValue3))
        {

        }
        else
        {
            fuelMPGTextBox.Text = Math.Round((Convert.ToDecimal(mileageMinusTextBox.Text) / Convert.ToDecimal(fuelGallonsTextBox.Text)), 3).ToString();
        }
        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
    }

    private void fuelGallonsTextBox_TextChanged(object sender, EventArgs e)
    {
        Decimal parsedValue;

        if (!Decimal.TryParse(fuelGallonsTextBox.Text, out parsedValue))
        {

        }
        else
        {
            fuelMPGTextBox.Text = Math.Round((Convert.ToDecimal(mileageMinusTextBox.Text) / Convert.ToDecimal(fuelGallonsTextBox.Text)),3).ToString();
        }
        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
    }

    private void fuelRegView_SelectedIndexChanged(object sender, EventArgs e)
    {

        BindingSource bs = new BindingSource();
        bs.DataSource = fuelDataGridView.DataSource;
        bs.Filter = "fuelreg like '%" + fuelRegView.Text + "%'";
        fuelDataGridView.DataSource = bs;

    }

    private void tabControl1_Click(object sender, EventArgs e)
    {
        BindingSource bs = new BindingSource();
        bs.DataSource = fuelDataGridView.DataSource;
        bs.Filter = "fuelreg like '%'";
        fuelDataGridView.DataSource = bs;
        fuelRegView.SelectedIndex = -1;
    }

    private void fuelFromTextBox_TextChanged(object sender, EventArgs e)
    {
        decimal parsedValue;

        if (!decimal.TryParse(fuelToTextBox.Text, out parsedValue))
        {

        }
        else
        {
            mileageMinusTextBox.Text = (Convert.ToDecimal(fuelToTextBox.Text) - Convert.ToDecimal(fuelFromTextBox.Text)).ToString();
        }

        decimal parsedValue2;

        if (!decimal.TryParse(fuelLitersTextBox.Text, out parsedValue2))
        {

        }
        else
        {
            fuelGallonsTextBox.Text = (Convert.ToDecimal(fuelLitersTextBox.Text) / Convert.ToDecimal(convTextBox.Text)).ToString();

        }

        Decimal parsedValue3;

        if (!Decimal.TryParse(fuelGallonsTextBox.Text, out parsedValue3))
        {

        }
        else
        {
            fuelMPGTextBox.Text = Math.Round((Convert.ToDecimal(mileageMinusTextBox.Text) / Convert.ToDecimal(fuelGallonsTextBox.Text)), 3).ToString();
        }

        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
    }

}
}
</code>```

答:
Rewritten all the Convert's to use TryParse

```<code>private void fuelFromTextBox_TextChanged(object sender, EventArgs e)
    {
        double from, to;
        if (
            !double.TryParse(fuelFromTextBox.Text, out from) ||
            !double.TryParse(fuelToTextBox.Text, out to)
        )
        {

            return;
        }

        mileageMinusTextBox.Text = (to - from).ToString();

        decimal mile, gall;
        if (
            !decimal.TryParse(mileageMinusTextBox.Text, out mile) ||
            !decimal.TryParse(fuelGallonsTextBox.Text, out gall)
        )
        {

            return;
        }

        fuelMPGTextBox.Text = Math.Round((mile / gall), 3).ToString();

        decimal litres, conv;
        if (
            !decimal.TryParse(fuelLitersTextBox.Text, out litres) ||
            !decimal.TryParse(convTextBox.Text, out conv)
        )
        {

            return;
        }

        fuelGallonsTextBox.Text = (litres / conv).ToString();

        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
        fuelFromTextBox.Update();
        fuelToTextBox.Update();
        fuelLitersTextBox.Update();
        fuelGallonsTextBox.Update();
        fuelMPGTextBox.Update();
        mileageMinusTextBox.Update();
    }
</code>```

Body:
I have a simple form which has a few fields which all calculate off each other and are text boxes that require number inputs, I am having an issue where when I submit the form I get the following error even though the text boxes only contain numbers.

Error:

System.FormatException: 'Input string was not in a correct format.'

This exception was originally thrown at this call stack:
    System.Number.StringToNumber(string, System.Globalization.NumberStyles, ref System.Number.NumberBuffer, System.Globalization.NumberFormatInfo, bool)
    System.Number.ParseDecimal(string, System.Globalization.NumberStyles, System.Globalization.NumberFormatInfo)
    System.Convert.ToDecimal(string)
    CTMS.Fuel.fuelFromTextBox_TextChanged(object, System.EventArgs) in Fuel.cs
    System.Windows.Forms.Control.OnTextChanged(System.EventArgs)
    System.Windows.Forms.TextBoxBase.OnTextChanged(System.EventArgs)
    System.Windows.Forms.Control.Text.set(string)
    System.Windows.Forms.TextBoxBase.Text.set(string)
    System.Windows.Forms.TextBox.Text.set(string)
    CTMS.Fuel.AddFuelButton_Click(object, System.EventArgs) in Fuel.cs
    ...
    [Call Stack Truncated]

From Here:

 private void fuelFromTextBox_TextChanged(object sender, EventArgs e)
    {
        decimal parsedValue;

        if (!decimal.TryParse(fuelToTextBox.Text, out parsedValue))
        {

        }
        else
        {
            mileageMinusTextBox.Text = (Convert.ToDecimal(fuelToTextBox.Text) - Convert.ToDecimal(fuelFromTextBox.Text)).ToString();
        }

        decimal parsedValue2;

        if (!decimal.TryParse(fuelLitersTextBox.Text, out parsedValue2))
        {

        }
        else
        {
            fuelGallonsTextBox.Text = (Convert.ToDecimal(fuelLitersTextBox.Text) / Convert.ToDecimal(convTextBox.Text)).ToString();

        }

        Decimal parsedValue3;

        if (!Decimal.TryParse(fuelGallonsTextBox.Text, out parsedValue3))
        {

        }
        else
        {
            fuelMPGTextBox.Text = Math.Round((Convert.ToDecimal(mileageMinusTextBox.Text) / Convert.ToDecimal(fuelGallonsTextBox.Text)), 3).ToString();
        }

        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
    }

Full Code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace CTMS
{
public partial class Fuel : Form
{
    public Fuel()
    {
        InitializeComponent();
    }

    private void Fuel_Load(object sender, EventArgs e)
    {
        this.fuelTableAdapter.Fill(this.cTDBDataSet.fuel);
        SqlConnection con = new SqlConnection(Properties.Settings.Default.CTDBCS);
        convTextBox.Text = "4.546";
        con.Open();

        if (con.State == ConnectionState.Open)
        {
            connectedPic.Visible = true;
            disconnectedPic.Visible = false;
            panel1.BackColor = Color.LightGreen;
        }
        else
        {
            connectedPic.Visible = false;
            disconnectedPic.Visible = true;
            panel1.BackColor = Color.OrangeRed;
        }

        string Sql = "SELECT DISTINCT reg FROM vehicles";
        SqlCommand cmd = new SqlCommand(Sql, con);
        SqlDataReader DR = cmd.ExecuteReader();

        while (DR.Read())
        {
            fuelReg.Items.Add(DR[0]);
            fuelReg.SelectedIndex = -1;
            fuelRegView.Items.Add(DR[0]);
            fuelRegView.SelectedIndex = -1;
        }

        con.Close();
        mileageMinusTextBox.Text = "0";
    }

    private void AddFuelButton_Click(object sender, EventArgs e)
    {
        fuelDateTimeCombined.Text = fuelDatePicker.Text + ' ' + fuelTimePicker.Text;
        int currmile;
        int prevmile;
        Int32.TryParse(fuelToTextBox.Text, out currmile);
        Int32.TryParse(fuelFromTextBox.Text, out prevmile);

        if (string.IsNullOrWhiteSpace(fuelReg.Text) || string.IsNullOrWhiteSpace(fuelFromTextBox.Text) || string.IsNullOrWhiteSpace(fuelLitersTextBox.Text) ||
            currmile < prevmile)

        {
            MessageBox.Show("Values Missing or Mileage less than previous", "", MessageBoxButtons.OK, MessageBoxIcon.Error);
        }

        else
        {
            SqlConnection con = new SqlConnection(Properties.Settings.Default.CTDBCS);
            con.Open();
            string Sql = "INSERT INTO fuel (fuelreg, fuelprevmile, fuelcurrentmile, fuellitres, fuelmpg, fueldatetime)"
                        + "VALUES("
                        + "'" + fuelReg.Text + "', "
                        + "'" + fuelFromTextBox.Text + "', "
                        + "'" + fuelToTextBox.Text + "', "
                        + "'" + fuelLitersTextBox.Text + "', "
                        + "'" + fuelMPGTextBox.Text + "', "
                        + "'" + fuelDateTimeCombined.Text + "'"
                        + "); ";
            SqlCommand cmd = new SqlCommand(Sql, con);
            SqlDataReader DR = cmd.ExecuteReader();
            con.Close();

            fuelReg.Text = null;
            fuelFromTextBox.Text = null;
            fuelToTextBox.Text = null;
            fuelLitersTextBox.Text = null;
            fuelMPGTextBox.Text = null;
            fuelDatePicker.Text = null;
            fuelTimePicker.Text = null;
            fuelDateTimeCombined.Text = null;
            this.fuelTableAdapter.Fill(this.cTDBDataSet.fuel);
        }
    }

    private void FuelDateNowButton_Click(object sender, EventArgs e)
    {
        fuelDatePicker.Text = DateTime.Now.ToString();
        fuelTimePicker.Text = DateTime.Now.ToString();

    }

    private void FuelPrevMileage_Click(object sender, EventArgs e)
    {

    }

    private void FuelReg_SelectedIndexChanged(object sender, EventArgs e)
    {

        fuelFromTextBox.ReadOnly = false;
        fuelToTextBox.ReadOnly = false;
        fuelLitersTextBox.ReadOnly = false;

    }

    private void FuelBindingNavigatorSaveItem_Click(object sender, EventArgs e)
    {
        this.Validate();
        this.fuelBindingSource.EndEdit();
        this.tableAdapterManager.UpdateAll(this.cTDBDataSet);

    }

    private void mileageMinusTextBox_TextChanged(object sender, EventArgs e)
    {
        decimal parsedValue2;

        if (!decimal.TryParse(fuelLitersTextBox.Text, out parsedValue2))
        {

        }
        else
        {
            fuelGallonsTextBox.Text = (Convert.ToDecimal(fuelLitersTextBox.Text) / Convert.ToDecimal(convTextBox.Text)).ToString();

        }
        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
    }

    private void FuelLitersTextBox_TextChanged(object sender, EventArgs e)
    {
        decimal parsedValue;

        if (!decimal.TryParse(fuelLitersTextBox.Text, out parsedValue))
        {

        }
        else
        {
            fuelGallonsTextBox.Text = (Convert.ToDecimal(fuelLitersTextBox.Text) / Convert.ToDecimal(convTextBox.Text)).ToString();

        }
        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();

    }

    private void fuelToTextBox_TextChanged(object sender, EventArgs e)
    {
        int parsedValue;

        if (!int.TryParse(fuelToTextBox.Text, out parsedValue))
        {

        }
        else
        {
            mileageMinusTextBox.Text = (Convert.ToDecimal(fuelToTextBox.Text) - Convert.ToDecimal(fuelFromTextBox.Text)).ToString();
        }

        decimal parsedValue2;

        if (!decimal.TryParse(fuelLitersTextBox.Text, out parsedValue2))
        {

        }
        else
        {
            fuelGallonsTextBox.Text = (Convert.ToDecimal(fuelLitersTextBox.Text) / Convert.ToDecimal(convTextBox.Text)).ToString();

        }

        Decimal parsedValue3;

        if (!Decimal.TryParse(fuelGallonsTextBox.Text, out parsedValue3))
        {

        }
        else
        {
            fuelMPGTextBox.Text = Math.Round((Convert.ToDecimal(mileageMinusTextBox.Text) / Convert.ToDecimal(fuelGallonsTextBox.Text)), 3).ToString();
        }
        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
    }

    private void fuelGallonsTextBox_TextChanged(object sender, EventArgs e)
    {
        Decimal parsedValue;

        if (!Decimal.TryParse(fuelGallonsTextBox.Text, out parsedValue))
        {

        }
        else
        {
            fuelMPGTextBox.Text = Math.Round((Convert.ToDecimal(mileageMinusTextBox.Text) / Convert.ToDecimal(fuelGallonsTextBox.Text)),3).ToString();
        }
        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
    }

    private void fuelRegView_SelectedIndexChanged(object sender, EventArgs e)
    {

        BindingSource bs = new BindingSource();
        bs.DataSource = fuelDataGridView.DataSource;
        bs.Filter = "fuelreg like '%" + fuelRegView.Text + "%'";
        fuelDataGridView.DataSource = bs;

    }

    private void tabControl1_Click(object sender, EventArgs e)
    {
        BindingSource bs = new BindingSource();
        bs.DataSource = fuelDataGridView.DataSource;
        bs.Filter = "fuelreg like '%'";
        fuelDataGridView.DataSource = bs;
        fuelRegView.SelectedIndex = -1;
    }

    private void fuelFromTextBox_TextChanged(object sender, EventArgs e)
    {
        decimal parsedValue;

        if (!decimal.TryParse(fuelToTextBox.Text, out parsedValue))
        {

        }
        else
        {
            mileageMinusTextBox.Text = (Convert.ToDecimal(fuelToTextBox.Text) - Convert.ToDecimal(fuelFromTextBox.Text)).ToString();
        }

        decimal parsedValue2;

        if (!decimal.TryParse(fuelLitersTextBox.Text, out parsedValue2))
        {

        }
        else
        {
            fuelGallonsTextBox.Text = (Convert.ToDecimal(fuelLitersTextBox.Text) / Convert.ToDecimal(convTextBox.Text)).ToString();

        }

        Decimal parsedValue3;

        if (!Decimal.TryParse(fuelGallonsTextBox.Text, out parsedValue3))
        {

        }
        else
        {
            fuelMPGTextBox.Text = Math.Round((Convert.ToDecimal(mileageMinusTextBox.Text) / Convert.ToDecimal(fuelGallonsTextBox.Text)), 3).ToString();
        }

        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
    }

}
}

Body:
Rewritten all the Convert's to use TryParse

private void fuelFromTextBox_TextChanged(object sender, EventArgs e)
    {
        double from, to;
        if (
            !double.TryParse(fuelFromTextBox.Text, out from) ||
            !double.TryParse(fuelToTextBox.Text, out to)
        )
        {

            return;
        }

        mileageMinusTextBox.Text = (to - from).ToString();

        decimal mile, gall;
        if (
            !decimal.TryParse(mileageMinusTextBox.Text, out mile) ||
            !decimal.TryParse(fuelGallonsTextBox.Text, out gall)
        )
        {

            return;
        }

        fuelMPGTextBox.Text = Math.Round((mile / gall), 3).ToString();

        decimal litres, conv;
        if (
            !decimal.TryParse(fuelLitersTextBox.Text, out litres) ||
            !decimal.TryParse(convTextBox.Text, out conv)
        )
        {

            return;
        }

        fuelGallonsTextBox.Text = (litres / conv).ToString();

        fuelFromTextBox.Refresh();
        fuelToTextBox.Refresh();
        fuelLitersTextBox.Refresh();
        fuelGallonsTextBox.Refresh();
        fuelMPGTextBox.Refresh();
        mileageMinusTextBox.Refresh();
        fuelFromTextBox.Update();
        fuelToTextBox.Update();
        fuelLitersTextBox.Update();
        fuelGallonsTextBox.Update();
        fuelMPGTextBox.Update();
        mileageMinusTextBox.Update();
    }


问:
Django: how to modify form field order of bound form with one unbound field?
I have an update form with 4 fields to display

3 of them are related to a class to which the form is bound
the last field (country) is only for information and I would like that field to be display in first position
currently, it is displayed at the end of my form...

I tryed to use field_order but country field is ignored...

form.py

```<code>class ParametrageForm(forms.ModelForm):

    def __init__(self, request, *args, **kwargs):
        super(ParametrageForm, self).__init__(*args, **kwargs)
        self.request = request
        self.language = request.session.get('language')
        self.user = request.user.id # id de l'utilisateur
        self.user_pays = request.session.get('user_pays') # pays de l'utilisateur
        self.user_site_type = request.session.get('user_site_type')
        self.user_site = request.session.get('user_site')
        instance = Parametrage.objects.get(asp_par_cle = kwargs['instance'].asp_par_cle)

        SITE_CONCERNE = Site.option_list_sites(self.language)
        if self.language == 'en':
            country= Site.objects.get(sit_abr = instance.asp_par_loc).reg.pay.pay_nom_eng
        elif self.language == 'fr':
            country= Site.objects.get(sit_abr = instance.asp_par_loc).reg.pay.pay_nom_fra
        else:
            country= Site.objects.get(sit_abr = instance.asp_par_loc).reg.pay.pay_nom_eng

        self.fields["country"] = forms.CharField(label = _("Country"),widget=forms.TextInput,initial=country, disabled=True)
        self.fields["asp_par_loc"] = forms.ChoiceField(label = _("Site concerned by settings"), widget=forms.Select, choices=SITE_CONCERNE,)
        self.fields["asp_par_ale"] = forms.IntegerField(label = _("Stock alert value for this site"), widget=forms.TextInput,)
        self.fields["asp_par_con"] = forms.IntegerField(label = _("Stock confort value for this site"), widget=forms.TextInput,)

    class Meta:
        model = Parametrage
        fields = ('asp_par_loc','asp_par_ale','asp_par_con',)

    field_order = ['country','asp_par_loc','asp_par_ale','asp_par_con',]
</code>```

答:
Replace

```<code>    self.fields["country"] = forms.CharField(label = _("Country"),widget=forms.TextInput,initial=country, disabled=True)
</code>```

with

```<code>    country = forms.CharField(label = _("Country"),widget=forms.TextInput,initial=country, disabled=True)
</code>```

Body:
I have an update form with 4 fields to display

3 of them are related to a class to which the form is bound
the last field (country) is only for information and I would like that field to be display in first position
currently, it is displayed at the end of my form...

I tryed to use field_order but country field is ignored...

form.py

class ParametrageForm(forms.ModelForm):

    def __init__(self, request, *args, **kwargs):
        super(ParametrageForm, self).__init__(*args, **kwargs)
        self.request = request
        self.language = request.session.get('language')
        self.user = request.user.id # id de l'utilisateur
        self.user_pays = request.session.get('user_pays') # pays de l'utilisateur
        self.user_site_type = request.session.get('user_site_type')
        self.user_site = request.session.get('user_site')
        instance = Parametrage.objects.get(asp_par_cle = kwargs['instance'].asp_par_cle)

        SITE_CONCERNE = Site.option_list_sites(self.language)
        if self.language == 'en':
            country= Site.objects.get(sit_abr = instance.asp_par_loc).reg.pay.pay_nom_eng
        elif self.language == 'fr':
            country= Site.objects.get(sit_abr = instance.asp_par_loc).reg.pay.pay_nom_fra
        else:
            country= Site.objects.get(sit_abr = instance.asp_par_loc).reg.pay.pay_nom_eng

        self.fields["country"] = forms.CharField(label = _("Country"),widget=forms.TextInput,initial=country, disabled=True)
        self.fields["asp_par_loc"] = forms.ChoiceField(label = _("Site concerned by settings"), widget=forms.Select, choices=SITE_CONCERNE,)
        self.fields["asp_par_ale"] = forms.IntegerField(label = _("Stock alert value for this site"), widget=forms.TextInput,)
        self.fields["asp_par_con"] = forms.IntegerField(label = _("Stock confort value for this site"), widget=forms.TextInput,)

    class Meta:
        model = Parametrage
        fields = ('asp_par_loc','asp_par_ale','asp_par_con',)

    field_order = ['country','asp_par_loc','asp_par_ale','asp_par_con',]

Body:
Replace

    self.fields["country"] = forms.CharField(label = _("Country"),widget=forms.TextInput,initial=country, disabled=True)

with

    country = forms.CharField(label = _("Country"),widget=forms.TextInput,initial=country, disabled=True)