Я пытаюсь скопировать макет Slack. Одной вещью, которую я не могу получить, является получение даты, чтобы перекрыть заголовок. Я проверил Slack HTML / CSS, и они используют комбинацию Sticky и абсолютного позиционирования. Я бы предпочел использовать относительное позиционирование.
HTML
<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>
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;
}
Ссылка на jsbin
Липкий под заголовком:
