title: CSS Grid, position absolute an element in a css grid item: IMPOSSIBLE
body: <p>I have this situation: <a href="https://jsfiddle.net/rozkvsdh/5/" rel="nofollow noreferrer">https://jsfiddle.net/rozkvsdh/5/</a></p>
  
  <p>A CSS Grid, simply, but in some items, I need to put a ribbon or another div.</p>
  
  <p>It's impossible!</p>
  
  <p>How can I do?</p>
  
  <pre><code> grid-item {
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .ribbon-wrapper {
    width: 85px; // the length should be not in px I think!
    height: 88px; // the length should be not in px I think!
    overflow: hidden;
    //position: absolute; it doesn't work!
    position: relative;
    top: -3px;
    left: -3px;
    .ribbon {
      font: bold 15px sans-serif;
      color: #333;
      text-align: center;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      position: relative;
      padding: 7px 0;
      top: 15px;
      left: -30px;
      width: 120px;
      background-color: #ebb134;
      color: #fff;
    }
  }
  </code></pre>