title: Absolute positioning error in Internet Explorer 11
body: <p>I have a page that displays correctly in Google Chrome, Firefox, and Opera, but has an error in Internet Explorer 11.</p>
  
  <p>Here is the HTML, with the unnecessary parts stripped out:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="page-content"&gt;
          &lt;div id="corner"&gt;&lt;/div&gt;
          ... page contents here
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the CSS:</p>
  
  <pre><code>.container {
      margin: 0;
      min-height: 100%;
      padding: 0;
  }
  
  
  .page-content::after {
      content: "";
      display: block;
      height: 1px;
  }
  .page-content {
      background: linear-gradient(137deg, transparent 121px, #ffffff 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
      margin: 190px 100px 150px;
      max-width: 64em;
      padding: 10px 120px 145px;
      z-index: 2;
  }
  .page-content {
      margin: auto;
      max-width: 64em;
      padding: 0 1em 1em;
  }
  
  #corner {
      background-color: #ffffff;
      background-image: url("corner.png");
      display: block;
      height: 200px;
      left: 120px;
      position: absolute;
      top: 20px;
      width: 200px;
      z-index: -1;
  }
  </code></pre>
  
  <p>As you can see in this screenshot the #corner element is not positioned correctly.</p>
  
  <p><img src="https://i.stack.imgur.com/DRDoA.png" alt="enter image description here"></p>
  
  <p>I'm really not sure what to try, since this is specific to Internet Explorer. Been trying different things with the code over the past couple of hours with no luck so far.</p>