Responsive page using pure CSS

Community feedback

• 

  Huynh Nguyen•430

  @Nghuynh07Posted over 2 years ago

  @Hanka8 Hello great job on the solution. Z-index itself doensn't do anything unless you add a position other than static to it. Most of the time relative is used if you just need to overlap another element. Try to see if it works. Cheers to an awesome challenge completed. Algorithm for CSS grid includes z-index so if you use grid, you dont need to include a position. That is to say if you display is grid you dont need to set the element to any position. It would just work right out of the box for grid. See below for a quick read on z-index:

  https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

  Marked as helpful

  0
• 

  Hana•960

  @Hanka8Posted over 2 years ago

  Hi Huynh, thanks for your comment. I added position: relative / absolute to my elements, but it still doestn work. I dont understand why (Its better seen when you change box-shadow´s color to for example red).

  .mobile__content__answer {
    background: white;
    color: var(--mobileTextColor2);
    font-size: var(--mobTextSize);
    line-height: var(--mobTextLize);
    border-radius: 10px;
    padding: 6px 8px;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
    max-width: calc(128rem/16);
    position: relative;
    z-index: 2;
  }
  
  .mobile__content__answer::before {
    content:"";
    position: absolute;
    width:100%;
    right: 0px;
    bottom:-2px;
    transform:scale(.8);
    box-shadow: 0px 0px 5px 3px #eceaee;
    z-index: 1;
  }
  

  0

  ---

  

  Huynh Nguyen•430

  @Nghuynh07Posted over 2 years ago

  @Hanka8

  Hello again, I have been reading more Z-index. I found a really good article by Josh Comeau. There are a lot of useful information regarding z-index. I learned a lot from this. Maybe it'll help you solve your z-index as well.

  https://www.joshwcomeau.com/css/stacking-contexts/

  0