I was creating a site that manages notes. There is a header tag with a heading of “Notes”, a tilted divider and bunch of notes as cards. I want the divider (a tilt made using svg) to stay below the cards and the header to ascent stay above the cards when scrolled. I made a code but header still stays below the cards.

Notes:

  • I’m using z-index property to sort the layout
  • I put the divider and the heading in the same container (is it a problem?)
:root {
  --theme: #198754;
}
* {
  box-sizing: border-box;
}

body,
html {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Segoe UI", Roboto, sans-serif;
}

main {
  height: 100%;
}

header {
  position: sticky;
  top: 0px;
  height: 30%;
  width: 100%;
  background-color: white;
}

.heading {
  padding: 30px;
  z-index: 10; 
}

.custom-shape-divider-top-1633855194 {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 0;
}

.custom-shape-divider-top-1633855194 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100px;
  transform: rotateY(180deg);
}

.custom-shape-divider-top-1633855194 .shape-fill {
  fill: #ffffff;
}


h2, h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.notes {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  background-color: var(--theme);
  justify-content: space-between;
}

.note {
  flex: 0 1 24%;
  box-shadow: #333333 0px 0px 5px;
  background-color: white;
  border-radius: 10px;
  z-index: 0;
  margin: 1rem .25em;
  padding: 15px;
  height: 150px;
}

@media screen and (max-width: 500px) {
  .notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .note {
    flex: 0 1 100%;
  }
}

@media screen and (min-width: 500px) {
  .notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .note {
    flex: 0 1 calc(50% - 1em);
    max-width: calc(50% -  1em);
  }
}

@media screen and (min-width: 1000px) {
  .card {
    flex: 0 1 calc(25% - 1em);
    max-width: calc(25% - 1em);
  }
}
<header>
  <div class="heading">
    <h1>Notes</h1>
  </div>
  <div class="shape-divider">
    <div class="custom-shape-divider-top-1633855194">
      <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path>
      </svg>
    </div>
  </div>
</header>
<div class="notes">
  <div class="note">
      <h2>Note 1</h2>
  </div> 
  <div class="note">
      <h2>Note 2</h2>
   </div>
   <div class="note">
      <h2>Note 3</h2>
   </div>
   <div class="note">
      <h2>Note 4</h2>
   </div>
   <div class="note">
      <h2>Note 5</h2>
   </div>
</div>

1

You code cannot work properly because if you add z-index to your header, then whole the header with background clip will be above of the cards.
So I added a fixed heading-main to solve it.

:root {
  --theme: #198754;
}
* {
  box-sizing: border-box;
}

body,
html {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Segoe UI", Roboto, sans-serif;
}

main {
  height: 100%;
}

header {
  position: sticky;
  top: 0px;
  height: 30%;
  width: 100%;
  background-color: white;
}

.heading {
  padding: 30px;
  opacity: 0;
}
.heading-main {
  padding: 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.custom-shape-divider-top-1633855194 {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 0;
}

.custom-shape-divider-top-1633855194 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100px;
  transform: rotateY(180deg);
}

.custom-shape-divider-top-1633855194 .shape-fill {
  fill: #ffffff;
}


h2, h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.notes {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  background-color: var(--theme);
  justify-content: space-between;
}

.note {
  flex: 0 1 24%;
  box-shadow: #333333 0px 0px 5px;
  background-color: white;
  border-radius: 10px;
  z-index: 0;
  margin: 1rem .25em;
  padding: 15px;
  height: 150px;
}

@media screen and (max-width: 500px) {
  .notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .note {
    flex: 0 1 100%;
  }
}

@media screen and (min-width: 500px) {
  .notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .note {
    flex: 0 1 calc(50% - 1em);
    max-width: calc(50% -  1em);
  }
}

@media screen and (min-width: 1000px) {
  .card {
    flex: 0 1 calc(25% - 1em);
    max-width: calc(25% - 1em);
  }
}
<div class="heading-main">
  <h1>Notes</h1>
</div>
<header>
  <div class="heading">
    <h1>Notes</h1>
  </div>
  <div class="shape-divider">
    <div class="custom-shape-divider-top-1633855194">
      <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path>
      </svg>
    </div>
  </div>
</header>
<div class="notes">
  <div class="note">
      <h2>Note 1</h2>
  </div> 
  <div class="note">
      <h2>Note 2</h2>
   </div>
   <div class="note">
      <h2>Note 3</h2>
   </div>
   <div class="note">
      <h2>Note 4</h2>
   </div>
   <div class="note">
      <h2>Note 5</h2>
   </div>
</div>


Not the answer you’re looking for? Browse other questions tagged
or ask your own question.