Jump to content

CSS Grid (and/or Flex) - Overlap Two Divs


kongondo
 Share

Recommended Posts

Here's one for you CSS ladies and gents. I am trying to improve my knowledge (and use!) of CSS Grid and Flex. I have pored over tutorials, both written and visual. However, I have hit a brick wall with something seemingly simple. I would like to overlap two divs as illustrated in the image below. There are two layouts, one slightly different than the other. I would like div two to overlap div one. In the good 'ol days maybe a negative margin and position absolute would have done the trick. I would like to achieve this using CSS Grid and if needed, CSS Flex. I don't care about IE.

Thanks for any code, pointers etc. 

css_overlap_divs_using_css_grid_and_or_flex.png.20d993fbd6e1f3da7cab14a511893b3b.png

 

Edited by kongondo
Link to comment
Share on other sites

Greetings!

Webflow has an super nice tutorial on implementing this using their app, BUT it's totally fine to just learn from it and to it by hand, so if you are more of a visual learner, like me, you'll enjoy it: 

 

  • Like 3
Link to comment
Share on other sites

8 hours ago, kongondo said:

Here's one for you CSS ladies and gents. I am trying to improve my knowledge (and use!) of CSS Grid and Flex. I have pored over tutorials, both written and visual. However, I have hit a brick wall with something seemingly simple. I would like to overlap two divs as illustrated in the image below. There are two layouts, one slightly different than the other. I would like div two to overlap div one. In the good 'ol days maybe a negative margin and position absolute would have done the trick. I would like to achieve this using CSS Grid and if needed, CSS Flex. I don't care about IE.

Very easy using css grid no need flex to do that.

Use z index bigger for div two and use grid-area to locate div one and div two.

  • Like 2
Link to comment
Share on other sites

21 hours ago, kongondo said:

can I then use margins (top or bottom) as needed to further pull/push the overlapping element

You can use padding/margins to tweak but first define your rows and columns so that they overlap where required. In the example below I have a text block partially overlapping an image. On small screens, the text overlaps at the bottom and on larger screens, the text is on the left and overlaps the image on the right.

Spoiler

.hero__wrapper {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10,auto);

  .hero__img {
    grid-column: 1 / -1;
    grid-row: 1 / 9;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .hero__title {
    font-size: calc(var(--fs-text) * 1.5);
    margin-block-start: 1rem;
  }

  .hero__body {
    grid-column: 2 / -2;
    grid-row: 8 / -1;
    background: var(--clr-pale);
    padding: 1rem;

    h2 {
      font-size: calc(var(--fs-text) * 1.8);
      color: var(--clr-blue-10);
      text-transform: none;
      margin: var(--padding) 0;
    }

    .hero__buttons {
      margin-block-start: var(--padding);
      display: flex;
      flex-wrap: wrap;

      .button {
        margin: 0.5rem 0.5rem 0 0;
      }
    }
  }

  @media screen and (min-width: 1024px) {
    grid-template-columns: repeat(10, 1fr);
    min-height: 50vh;
    grid-template-rows: repeat(4, 1fr);


    .hero__img {
      grid-column: 6 / -1;
      grid-row: 1 / -1;
      object-fit: cover;
      width: 100%;

    }

    .hero__title {
      margin-block-start: 1rem;
    }

    .hero__body {
      grid-column: 1 / 7;
      grid-row: 2 / 4;
      background: var(--clr-pale);
      padding: 1rem;
      margin-inline-start: calc(10vw - 1rem);

      h2 {
        font-size: calc(var(--fs-text) * 3);
        @supports (font-size: clamp(3em, 4em, 5em)) {
          font-size: clamp(3em, 4em, 5em);
          line-height: 1.1;
        }

      }
    }
  }
}

 

 

  • Like 3
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...