title: div's appearing behind each other
body: <p>I have problems with my <code>div</code>'s placing behind/on top of each other. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>td {
      width: 14.28%;
      height: 16.6%;
      position: relative;
      }
  
  .details {
      position: absolute; 
      display: none;
      background-color: gray;
      overflow: visible;
      border: 2px solid black;
      } 
  
  div:hover &gt; .details {display: block;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tr&gt;
  &lt;td *ngFor="let cell of ukeEn()"&gt;
                  {{cell.text}}
                  &lt;div class="outer" *ngIf="datoerContains(cell) != null"&gt;
                    &lt;div class="circle" *ngFor="let circle of datoerContains(cell)"&gt;&lt;/div&gt;
                    &lt;div class="details" *ngFor="let circle of datoerContains(cell)"&gt; 
                      {{circle.skole}} &lt;br&gt;
                      {{circle.kommentar}} &lt;br&gt;
                      SFO: {{circle.sfodag}}
                    &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is with the <code>details</code> class. Using the <code>*ngFor</code>, several <code>div</code>'s are created here - but you can only see one of them appearing as the other ones are "hiding" behind.</p>
  
  <p>Any ideas? I was going to test two ways; beside each other, and below each other.
  I would like to avoid removing <code>absolute</code> on the <code>.details</code> as it's used for another purpose.</p>